@mittwald/flow-react-components 1.6.0-next.32 → 1.6.0-next.34
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/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/AlertBadge/AlertBadge.mjs +1 -1
- package/dist/js/packages/components/src/components/AlertBadge/AlertBadge.mjs.map +1 -1
- package/dist/js/packages/components/src/components/AlertBadge/AlertBadge.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Badge/Badge.mjs +2 -2
- package/dist/js/packages/components/src/components/Badge/Badge.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Badge/Badge.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Icon/Icon.module.mjs.map +1 -1
- package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map +1 -1
- package/dist/types/components/AlertBadge/AlertBadge.d.ts +2 -2
- package/dist/types/components/Badge/Badge.d.ts +2 -2
- package/dist/types/lib/dev/hydrateServerMarkup.d.ts +2 -0
- package/package.json +10 -10
|
@@ -13,7 +13,7 @@ var AlertBadge = flowComponent("AlertBadge", (props) => {
|
|
|
13
13
|
const { children, className, status = "info", ref, ...rest } = props;
|
|
14
14
|
const isSkeleton = useSkeletonMode();
|
|
15
15
|
const rootClassName = clsx(AlertBadge_module_default.alertBadge, AlertBadge_module_default[status], isSkeleton && AlertBadge_module_default.skeleton, className);
|
|
16
|
-
return /* @__PURE__ */ jsx("
|
|
16
|
+
return /* @__PURE__ */ jsx("span", {
|
|
17
17
|
className: rootClassName,
|
|
18
18
|
...rest,
|
|
19
19
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertBadgeProps\n extends\n PropsWithChildren,\n PropsWithStatus,\n FlowComponentProps
|
|
1
|
+
{"version":3,"file":"AlertBadge.mjs","names":["styles"],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./AlertBadge.module.scss\";\nimport clsx from \"clsx\";\nimport { AlertIcon } from \"@/components/AlertIcon\";\nimport { Text } from \"@/components/Text\";\nimport type { PropsWithStatus, PropsWithClassName } from \"@/lib/types/props\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport interface AlertBadgeProps\n extends\n PropsWithChildren,\n PropsWithStatus,\n FlowComponentProps<HTMLSpanElement>,\n PropsWithClassName {}\n\n/** @flr-generate all */\nexport const AlertBadge = flowComponent(\"AlertBadge\", (props) => {\n const { children, className, status = \"info\", ref, ...rest } = props;\n\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.alertBadge,\n styles[status],\n isSkeleton && styles.skeleton,\n className,\n );\n\n return (\n <span\n className={rootClassName}\n {...rest}\n ref={ref}\n inert={isSkeleton || undefined}\n >\n <SkeletonModeReset>\n <AlertIcon size=\"s\" status={status} />\n <Text className={styles.text}>{children}</Text>\n </SkeletonModeReset>\n </span>\n );\n});\n\nexport default AlertBadge;\n"],"mappings":";;;;;;;;;;;AAqBA,IAAa,aAAa,cAAc,eAAe,UAAU;CAC/D,MAAM,EAAE,UAAU,WAAW,SAAS,QAAQ,KAAK,GAAG,SAAS;CAE/D,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBA,0BAAO,YACPA,0BAAO,SACP,cAAcA,0BAAO,UACrB,SACF;CAEA,OACE,oBAAC,QAAD;EACE,WAAW;EACX,GAAI;EACC;EACL,OAAO,cAAc,KAAA;EAErB,UAAA,qBAAC,mBAAD,EAAA,UAAA,CACE,oBAAC,WAAD;GAAW,MAAK;GAAY;EAAS,CAAA,GACrC,oBAAC,MAAD;GAAM,WAAWA,0BAAO;GAAO;EAAe,CAAA,CAC7B,EAAA,CAAA;CACf,CAAA;AAEV,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.alertBadge {\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n line-height: var(--badge--line-height);\n border-radius: var(--badge--corner-radius);\n padding-inline: var(--badge--padding-x);\n padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n display: flex;\n align-items: center;\n column-gap: var(--badge--spacing);\n max-width:
|
|
1
|
+
{"version":3,"file":"AlertBadge.module.mjs","names":[],"sources":["../../../../../../../src/components/AlertBadge/AlertBadge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.alertBadge {\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n line-height: var(--badge--line-height);\n border-radius: var(--badge--corner-radius);\n padding-inline: var(--badge--padding-x);\n padding-block: calc(var(--badge--padding-y) - (var(--badge--border-width)));\n display: inline-flex;\n align-items: center;\n column-gap: var(--badge--spacing);\n max-width: 100%;\n border-style: var(--badge--border-style);\n border-width: var(--badge--border-width);\n\n .text {\n @include ellipsis.ellipsis();\n\n /* In running text the badge sits on the baseline of its text, not on the\n bottom edge of the icon */\n align-self: baseline;\n }\n\n @extend .info;\n\n /* Status */\n @mixin status($status) {\n &.#{$status} {\n color: var(--alert-badge--#{$status}-content-color);\n background-color: var(--alert-badge--#{$status}-background-color);\n border-color: var(--alert-badge--#{$status}-border-color);\n }\n }\n\n @include status(info);\n @include status(success);\n @include status(warning);\n @include status(danger);\n @include status(unavailable);\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--badge--corner-radius);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
@@ -67,13 +67,13 @@ var Badge = flowComponent("Badge", (props) => {
|
|
|
67
67
|
};
|
|
68
68
|
return /* @__PURE__ */ jsx(PropsContextProvider, {
|
|
69
69
|
props: propsContext,
|
|
70
|
-
children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsxs("
|
|
70
|
+
children: /* @__PURE__ */ jsx(SkeletonModeReset, { children: /* @__PURE__ */ jsxs("span", {
|
|
71
71
|
className: rootClassName,
|
|
72
72
|
...rest,
|
|
73
73
|
ref,
|
|
74
74
|
inert: isSkeleton || void 0,
|
|
75
75
|
children: [
|
|
76
|
-
!onPress && /* @__PURE__ */ jsx("
|
|
76
|
+
!onPress && /* @__PURE__ */ jsx("span", {
|
|
77
77
|
className: Badge_module_default.content,
|
|
78
78
|
children
|
|
79
79
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n alphaColors,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends
|
|
1
|
+
{"version":3,"file":"Badge.mjs","names":["locales","styles"],"sources":["../../../../../../../src/components/Badge/Badge.tsx"],"sourcesContent":["import type { PropsWithChildren } from \"react\";\nimport styles from \"./Badge.module.scss\";\nimport clsx from \"clsx\";\nimport {\n alphaColors,\n isAlphaColor,\n type PropsWithClassName,\n} from \"@/lib/types/props\";\nimport { type PropsContext, PropsContextProvider } from \"@/lib/propsContext\";\nimport type { FlowComponentProps } from \"@/lib/componentFactory/flowComponent\";\nimport { flowComponent } from \"@/lib/componentFactory/flowComponent\";\nimport type { PressEvent } from \"@react-types/shared\";\nimport { Button } from \"@/components/Button\";\nimport { IconClose } from \"@/components/Icon/components/icons\";\nimport { useLocalizedStringFormatter } from \"@/components/TranslationProvider/useLocalizedStringFormatter\";\nimport { UiComponentTunnelExit } from \"@/components/UiComponentTunnel/UiComponentTunnelExit\";\nimport { ContextualHelpButton } from \"@/components/Badge/components/ContextualHelpButton\";\nimport locales from \"./locales/*.locale.json\";\nimport {\n SkeletonModeReset,\n useSkeletonMode,\n} from \"@/components/SkeletonMode/skeletonModeContext\";\n\nexport const badgeColors = [\n \"neutral\",\n \"blue\",\n \"navy\",\n \"violet\",\n \"teal\",\n \"lilac\",\n \"green\",\n \"orange\",\n \"red\",\n ...alphaColors,\n] as const;\nexport type BadgeColors = (typeof badgeColors)[number];\n\nexport interface BadgeProps\n extends\n PropsWithChildren,\n FlowComponentProps<HTMLSpanElement>,\n PropsWithClassName {\n /** Handler that is called when the badge is pressed. */\n onPress?: (e: PressEvent) => void;\n /** Handler that is called when the badges close icon is pressed. */\n onClose?: (e: PressEvent) => void;\n /** The color of the badge. @default \"neutral\" */\n color?: BadgeColors;\n /** Whether the badge is disabled. */\n isDisabled?: boolean;\n}\n\nconst contextualHelpTunnel = {\n id: \"contextualHelp\",\n component: \"Badge\",\n} as const;\n\n/** @flr-generate all */\nexport const Badge = flowComponent(\"Badge\", (props) => {\n const {\n children,\n className,\n color = \"neutral\",\n ref,\n onPress,\n onClose,\n isDisabled,\n ...rest\n } = props;\n\n const stringFormatter = useLocalizedStringFormatter(locales, \"Badge\");\n const isSkeleton = useSkeletonMode();\n\n const rootClassName = clsx(\n styles.badge,\n styles[color],\n isDisabled && styles.disabled,\n isSkeleton && styles.skeleton,\n className,\n );\n\n const buttonColor = isAlphaColor(color) ? color : \"dark\";\n\n const propsContext: PropsContext = {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n Button: {\n Label: {\n elementType: \"span\",\n className: styles.scope,\n unstyled: true,\n },\n Text: {\n elementType: \"span\",\n className: styles.value,\n },\n },\n ContextualHelp: {\n tunnel: contextualHelpTunnel,\n wrapWith: (\n <ContextualHelpButton\n className={styles.action}\n color={buttonColor}\n isDisabled={isDisabled}\n />\n ),\n },\n // A trigger the consumer wrote brings its own button. It goes to the same\n // place, styled like the one the badge supplies.\n ContextualHelpTrigger: {\n tunnel: contextualHelpTunnel,\n Button: {\n className: styles.action,\n color: buttonColor,\n variant: \"plain\",\n size: \"s\",\n isDisabled,\n },\n },\n };\n\n return (\n <PropsContextProvider props={propsContext}>\n {/* The badge is one skeleton surface, its content draws none. */}\n <SkeletonModeReset>\n <span\n className={rootClassName}\n {...rest}\n ref={ref}\n inert={isSkeleton || undefined}\n >\n {!onPress && <span className={styles.content}>{children}</span>}\n {onPress && (\n <Button\n isDisabled={isDisabled}\n unstyled\n className={styles.button}\n onPress={onPress}\n >\n {children}\n </Button>\n )}\n\n <UiComponentTunnelExit\n id={contextualHelpTunnel.id}\n component=\"Badge\"\n />\n\n {onClose && (\n <Button\n className={styles.close}\n size=\"s\"\n color={buttonColor}\n variant=\"plain\"\n onPress={onClose}\n isDisabled={isDisabled}\n aria-label={stringFormatter.format(\"remove\")}\n >\n <IconClose />\n </Button>\n )}\n </span>\n </SkeletonModeReset>\n </PropsContextProvider>\n );\n});\n\nexport default Badge;\n"],"mappings":";;;;;;;;;;;;;;;AAuB2B,CAUzB,GAAG,WACL;AAkBA,IAAM,uBAAuB;CAC3B,IAAI;CACJ,WAAW;AACb;;AAGA,IAAa,QAAQ,cAAc,UAAU,UAAU;CACrD,MAAM,EACJ,UACA,WACA,QAAQ,WACR,KACA,SACA,SACA,YACA,GAAG,SACD;CAEJ,MAAM,kBAAkB,4BAA4BA,kBAAS,OAAO;CACpE,MAAM,aAAa,gBAAgB;CAEnC,MAAM,gBAAgB,KACpBC,qBAAO,OACPA,qBAAO,QACP,cAAcA,qBAAO,UACrB,cAAcA,qBAAO,UACrB,SACF;CAEA,MAAM,cAAc,aAAa,KAAK,IAAI,QAAQ;CAElD,MAAM,eAA6B;EACjC,OAAO;GACL,aAAa;GACb,WAAWA,qBAAO;GAClB,UAAU;EACZ;EACA,MAAM;GACJ,aAAa;GACb,WAAWA,qBAAO;EACpB;EACA,QAAQ;GACN,OAAO;IACL,aAAa;IACb,WAAWA,qBAAO;IAClB,UAAU;GACZ;GACA,MAAM;IACJ,aAAa;IACb,WAAWA,qBAAO;GACpB;EACF;EACA,gBAAgB;GACd,QAAQ;GACR,UACE,oBAAC,sBAAD;IACE,WAAWA,qBAAO;IAClB,OAAO;IACK;GACb,CAAA;EAEL;EAGA,uBAAuB;GACrB,QAAQ;GACR,QAAQ;IACN,WAAWA,qBAAO;IAClB,OAAO;IACP,SAAS;IACT,MAAM;IACN;GACF;EACF;CACF;CAEA,OACE,oBAAC,sBAAD;EAAsB,OAAO;EAE3B,UAAA,oBAAC,mBAAD,EAAA,UACE,qBAAC,QAAD;GACE,WAAW;GACX,GAAI;GACC;GACL,OAAO,cAAc,KAAA;GAJvB,UAAA;IAMG,CAAC,WAAW,oBAAC,QAAD;KAAM,WAAWA,qBAAO;KAAU;IAAe,CAAA;IAC7D,WACC,oBAAC,QAAD;KACc;KACZ,UAAA;KACA,WAAWA,qBAAO;KACT;KAER;IACK,CAAA;IAGV,oBAAC,uBAAD;KACE,IAAI,qBAAqB;KACzB,WAAU;IACX,CAAA;IAEA,WACC,oBAAC,QAAD;KACE,WAAWA,qBAAO;KAClB,MAAK;KACL,OAAO;KACP,SAAQ;KACR,SAAS;KACG;KACZ,cAAY,gBAAgB,OAAO,QAAQ;KAE3C,UAAA,oBAAC,WAAD,CAAY,CAAA;IACN,CAAA;GAEN;EACW,CAAA,EAAA,CAAA;CACC,CAAA;AAE1B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.badge {\n display: flex;\n width: fit-content;\n max-width: 100%;\n\n --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n .content,\n .button {\n border-radius: var(--badge--corner-radius);\n border-width: var(--badge--border-width);\n border-style: var(--badge--border-style);\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n padding: 0;\n display: flex;\n overflow: hidden;\n align-items: center;\n height: var(--badge-size);\n line-height: var(--content-size);\n padding-inline: var(--badge--padding-x);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include ellipsis.ellipsis();\n }\n\n .button,\n .action,\n .close {\n @include focus.focus;\n }\n\n @extend .neutral;\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n }\n }\n\n &:has(.scope) {\n .content,\n .button {\n padding: 0;\n }\n\n .value {\n padding-inline: var(--badge--spacing) var(--badge--padding-x);\n }\n\n .scope {\n padding-inline: var(--badge--padding-x) var(--badge--spacing);\n height: 100%;\n flex-shrink: 0;\n }\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: var(--content-size);\n\n .value {\n padding-inline-end: var(--badge--spacing);\n }\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2);\n }\n }\n }\n\n .action,\n .close {\n height: var(--content-size);\n padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n border-radius: 0;\n margin-inline-start: calc(\n (var(--content-size) + var(--badge--border-width)) * -1\n );\n margin-top: var(--badge--border-width);\n }\n\n /* The trailing button rounds off the badge */\n .close,\n &:not(:has(.close)) .action {\n border-end-end-radius: var(--badge-size);\n border-start-end-radius: var(--badge-size);\n }\n\n &:has(.action):has(.close) {\n .action {\n margin-inline-start: calc(\n (var(--content-size) * 2 + var(--badge--border-width)) * -1\n );\n }\n\n .close {\n margin-inline-start: 0;\n }\n }\n\n /* Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .content,\n .button {\n border-color: var(--badge--#{$color}-border-color);\n background-color: var(--badge--#{$color}-background-color--default);\n color: var(--badge--#{$color}-content-color);\n }\n\n &:not(.disabled) {\n .button {\n &:hover {\n background-color: var(--badge--#{$color}-background-color--hover);\n }\n\n &[data-pressed] {\n background-color: var(--badge--#{$color}-background-color--pressed);\n }\n }\n }\n\n .scope {\n background-color: var(--badge--#{$color}-scope-background-color);\n color: var(--badge--#{$color}-scope-content-color);\n }\n }\n }\n\n @include color(\"neutral\");\n @include color(\"blue\");\n @include color(\"navy\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"green\");\n @include color(\"orange\");\n @include color(\"red\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n &.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-border-color);\n background-color: var(--badge--disabled-background-color);\n color: var(--badge--disabled-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-content-color);\n }\n\n .scope {\n background-color: var(--badge--disabled-scope-background-color);\n color: var(--badge--disabled-scope-content-color);\n }\n }\n\n /* Alpha Colors Disabled */\n\n @mixin alphaColor($color) {\n &.#{$color}.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-#{$color}-border-color);\n background-color: var(--badge--disabled-#{$color}-background-color);\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .scope {\n background-color: var(\n --badge--disabled-#{$color}-scope-background-color\n );\n color: var(--badge--disabled-#{$color}-scope-content-color);\n }\n }\n }\n\n @include alphaColor(\"dark\");\n @include alphaColor(\"light\");\n @include alphaColor(\"dark-static\");\n @include alphaColor(\"light-static\");\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--badge--corner-radius);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Badge.module.mjs","names":[],"sources":["../../../../../../../src/components/Badge/Badge.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n@use \"@/styles/mixins/ellipsis\";\n@use \"@/styles/mixins/skeleton\";\n\n.badge {\n display: inline-flex;\n width: fit-content;\n max-width: 100%;\n\n --badge-size: calc(var(--badge--line-height) + var(--badge--padding-y) * 2);\n --content-size: calc(var(--badge-size) - var(--badge--border-width) * 2);\n\n .content,\n .button {\n border-radius: var(--badge--corner-radius);\n border-width: var(--badge--border-width);\n border-style: var(--badge--border-style);\n font-size: var(--badge--font-size);\n font-weight: var(--badge--font-weight);\n padding: 0;\n display: flex;\n overflow: hidden;\n align-items: center;\n height: var(--badge-size);\n line-height: var(--content-size);\n padding-inline: var(--badge--padding-x);\n transition-property: background-color;\n transition-duration: var(--transition--duration--default);\n\n @include ellipsis.ellipsis();\n }\n\n .button,\n .action,\n .close {\n @include focus.focus;\n }\n\n @extend .neutral;\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) + var(--badge--spacing));\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2 + var(--badge--spacing));\n }\n }\n\n &:has(.scope) {\n .content,\n .button {\n padding: 0;\n }\n\n .value {\n padding-inline: var(--badge--spacing) var(--badge--padding-x);\n }\n\n .scope {\n padding-inline: var(--badge--padding-x) var(--badge--spacing);\n height: 100%;\n flex-shrink: 0;\n }\n\n &:has(.close),\n &:has(.action) {\n .button,\n .content {\n padding-inline-end: var(--content-size);\n\n .value {\n padding-inline-end: var(--badge--spacing);\n }\n }\n }\n\n &:has(.action):has(.close) {\n .button,\n .content {\n padding-inline-end: calc(var(--content-size) * 2);\n }\n }\n }\n\n .action,\n .close {\n height: var(--content-size);\n padding: calc(var(--badge--padding-y) - var(--badge--border-width));\n border-radius: 0;\n margin-inline-start: calc(\n (var(--content-size) + var(--badge--border-width)) * -1\n );\n margin-top: var(--badge--border-width);\n }\n\n /* The trailing button rounds off the badge */\n .close,\n &:not(:has(.close)) .action {\n border-end-end-radius: var(--badge-size);\n border-start-end-radius: var(--badge-size);\n }\n\n &:has(.action):has(.close) {\n .action {\n margin-inline-start: calc(\n (var(--content-size) * 2 + var(--badge--border-width)) * -1\n );\n }\n\n .close {\n margin-inline-start: 0;\n }\n }\n\n /* Colors */\n\n @mixin color($color) {\n &:where(.#{$color}) {\n .content,\n .button {\n border-color: var(--badge--#{$color}-border-color);\n background-color: var(--badge--#{$color}-background-color--default);\n color: var(--badge--#{$color}-content-color);\n }\n\n &:not(.disabled) {\n .button {\n &:hover {\n background-color: var(--badge--#{$color}-background-color--hover);\n }\n\n &[data-pressed] {\n background-color: var(--badge--#{$color}-background-color--pressed);\n }\n }\n }\n\n .scope {\n background-color: var(--badge--#{$color}-scope-background-color);\n color: var(--badge--#{$color}-scope-content-color);\n }\n }\n }\n\n @include color(\"neutral\");\n @include color(\"blue\");\n @include color(\"navy\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"green\");\n @include color(\"orange\");\n @include color(\"red\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n &.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-border-color);\n background-color: var(--badge--disabled-background-color);\n color: var(--badge--disabled-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-content-color);\n }\n\n .scope {\n background-color: var(--badge--disabled-scope-background-color);\n color: var(--badge--disabled-scope-content-color);\n }\n }\n\n /* Alpha Colors Disabled */\n\n @mixin alphaColor($color) {\n &.#{$color}.disabled {\n .content,\n .button {\n border-color: var(--badge--disabled-#{$color}-border-color);\n background-color: var(--badge--disabled-#{$color}-background-color);\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .action,\n .close {\n color: var(--badge--disabled-#{$color}-content-color);\n }\n\n .scope {\n background-color: var(\n --badge--disabled-#{$color}-scope-background-color\n );\n color: var(--badge--disabled-#{$color}-scope-content-color);\n }\n }\n }\n\n @include alphaColor(\"dark\");\n @include alphaColor(\"light\");\n @include alphaColor(\"dark-static\");\n @include alphaColor(\"light-static\");\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--badge--corner-radius);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n flex-shrink: 0;\n max-width: none;\n display: inline-block;\n\n @extend .size-m;\n\n /* Sizes */\n @mixin size($size, $faPadding) {\n &:where(.size-#{$size}) {\n width: var(--icon--size--#{$size});\n height: var(--icon--size--#{$size});\n\n /*\n * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n * sizes `.svg-inline--fa` itself (`content-box`, `1.25em` × `1em`).\n * Unlayered CSS beats layered CSS regardless of specificity, so this\n * override only applies in the layered stylesheet variant if it leaves\n * the cascade layer as well.\n *\n * The size goes back to Flow's layered rules (`revert-layer`) instead of\n * the token, so a context's size (`Avatar`'s 70 %) still applies. The\n * variants without layers drop these declarations — there Flow's rules\n * already win, and `revert-layer` would discard them all.\n *\n * Marked at the leaf rather than in a separate block, because these rules\n * live in a size mixin – a block would have to duplicate it.\n */\n &:global(.svg-inline--fa) {\n @layer flow.unlayered {\n width: revert-layer;\n height: revert-layer;\n box-sizing: border-box;\n padding: $faPadding;\n }\n }\n }\n }\n\n @include size(m, var(--size-rem--xxs));\n @include size(s, var(--size-rem--xxs));\n @include size(l, var(--size-rem--xs));\n\n /*\n * FontAwesome also sets `vertical-align: -0.125em`, which would shift the\n * icon a context aligns (`Heading`, `Alert`, `Link`). Same mechanism as the\n * size above.\n */\n &:global(.svg-inline--fa) {\n @layer flow.unlayered {\n vertical-align: revert-layer;\n }\n }\n\n /* Colors */\n @mixin color($color) {\n &.#{$color} {\n color: var(--icon--#{$color}-color);\n }\n }\n\n &.neutral {\n color: var(--icon--color);\n }\n\n @include color(\"danger\");\n @include color(\"success\");\n @include color(\"warning\");\n @include color(\"info\");\n @include color(\"unavailable\");\n @include color(\"blue\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--corner-radius--s);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
|
1
|
+
{"version":3,"file":"Icon.module.mjs","names":[],"sources":["../../../../../../../src/components/Icon/Icon.module.scss"],"sourcesContent":["@use \"@/styles/mixins/skeleton\";\n\n.icon {\n flex-shrink: 0;\n max-width: none;\n display: inline-block;\n vertical-align: baseline;\n\n @extend .size-m;\n\n /* Sizes */\n @mixin size($size, $faPadding) {\n &:where(.size-#{$size}) {\n width: var(--icon--size--#{$size});\n height: var(--icon--size--#{$size});\n\n /*\n * FontAwesome inserts its stylesheet as an unlayered `<style>` element at\n * runtime (`autoAddCss` defaults to true), outside of Flow's build, and\n * sizes `.svg-inline--fa` itself (`content-box`, `1.25em` × `1em`).\n * Unlayered CSS beats layered CSS regardless of specificity, so this\n * override only applies in the layered stylesheet variant if it leaves\n * the cascade layer as well.\n *\n * `display` and `vertical-align` are set the same way: a context hides\n * its icon (`display: none` on `Breadcrumb`'s last separator, an\n * unselected `Segment`'s checkmark) or aligns it (`Alert`, `Link`).\n *\n * The size goes back to Flow's layered rules (`revert-layer`) instead of\n * the token, so a context's size (`Avatar`'s 70 %) still applies. The\n * variants without layers drop these declarations — there Flow's rules\n * already win, and `revert-layer` would discard them all.\n *\n * Marked at the leaf rather than in a separate block, because these rules\n * live in a size mixin – a block would have to duplicate it.\n */\n &:global(.svg-inline--fa) {\n @layer flow.unlayered {\n width: revert-layer;\n height: revert-layer;\n display: revert-layer;\n vertical-align: revert-layer;\n box-sizing: border-box;\n padding: $faPadding;\n }\n }\n }\n }\n\n @include size(m, var(--size-rem--xxs));\n @include size(s, var(--size-rem--xxs));\n @include size(l, var(--size-rem--xs));\n\n /*\n * FontAwesome also sets `vertical-align: -0.125em`, which would shift the\n * icon a context aligns (`Heading`, `Alert`, `Link`). Same mechanism as the\n * size above.\n */\n &:global(.svg-inline--fa) {\n @layer flow.unlayered {\n vertical-align: revert-layer;\n }\n }\n\n /* Colors */\n @mixin color($color) {\n &.#{$color} {\n color: var(--icon--#{$color}-color);\n }\n }\n\n &.neutral {\n color: var(--icon--color);\n }\n\n @include color(\"danger\");\n @include color(\"success\");\n @include color(\"warning\");\n @include color(\"info\");\n @include color(\"unavailable\");\n @include color(\"blue\");\n @include color(\"violet\");\n @include color(\"teal\");\n @include color(\"lilac\");\n @include color(\"dark\");\n @include color(\"light\");\n @include color(\"dark-static\");\n @include color(\"light-static\");\n\n /* SkeletonMode */\n\n &.skeleton {\n @include skeleton.shape;\n\n --skeleton-radius: var(--corner-radius--s);\n }\n}\n\n@include skeleton.keyframes;\n"],"mappings":""}
|
package/dist/js/packages/components/src/components/Tabs/components/TabTitle/TabTitle.module.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. */\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n font-weight: inherit;\n}\n\n.menuItem {\n // The tab's children are the consumer's
|
|
1
|
+
{"version":3,"file":"TabTitle.module.mjs","names":[],"sources":["../../../../../../../../../src/components/Tabs/components/TabTitle/TabTitle.module.scss"],"sourcesContent":["@use \"@/styles/mixins/focus\";\n\n.tabTitle {\n position: relative;\n padding-block: var(--tabs--padding-y);\n padding-inline: var(--tabs--padding-x);\n color: var(--tabs--color--default);\n cursor: default;\n white-space: nowrap;\n transition-property: background-color;\n display: flex;\n align-items: center;\n justify-content: center;\n flex: 1 1 0;\n column-gap: var(--tabs--spacing);\n border-radius: var(--tabs--corner-radius);\n\n @include focus.focus;\n\n & {\n outline-offset: calc(var(--size-px--xs) * -1);\n }\n\n /* The active indicator is painted below the titles (it precedes them in the\n tab list), so the selected title must not paint a background over it. */\n &:not([data-selected]) {\n &:hover {\n background-color: var(--tabs--background-color--hover);\n transition-duration: var(--transition--duration--default);\n }\n\n &[data-pressed] {\n background-color: var(--tabs--background-color--pressed);\n transition-duration: var(--transition--duration--default);\n }\n }\n\n &[aria-disabled=\"true\"] {\n color: var(--tabs--color--disabled);\n }\n\n .text {\n display: flex;\n align-items: center;\n column-gap: var(--tabs--spacing);\n }\n}\n\n/* selected tab */\n.tabTitle[data-selected] {\n font-weight: var(--tabs--font-weight--selected);\n}\n\n/* SkeletonMode: no tab shows as selected */\n.tabTitle.skeleton[data-selected] {\n font-weight: inherit;\n}\n\n.menuItem {\n // The tab's children are the consumer's. Badges render a span, too.\n > :global(.flow--text) {\n display: flex;\n align-items: center;\n justify-content: space-between;\n column-gap: var(--tabs--spacing);\n flex-grow: 1;\n }\n}\n"],"mappings":""}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { PropsWithChildren } from 'react';
|
|
2
2
|
import { PropsWithStatus, PropsWithClassName } from '../../lib/types/props';
|
|
3
3
|
import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
4
|
-
export interface AlertBadgeProps extends PropsWithChildren, PropsWithStatus, FlowComponentProps
|
|
4
|
+
export interface AlertBadgeProps extends PropsWithChildren, PropsWithStatus, FlowComponentProps<HTMLSpanElement>, PropsWithClassName {
|
|
5
5
|
}
|
|
6
6
|
/** @flr-generate all */
|
|
7
|
-
export declare const AlertBadge: import('react').FunctionComponent<AlertBadgeProps & import('react').RefAttributes<
|
|
7
|
+
export declare const AlertBadge: import('react').FunctionComponent<AlertBadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
8
8
|
export default AlertBadge;
|
|
@@ -4,7 +4,7 @@ import { FlowComponentProps } from '../../lib/componentFactory/flowComponent';
|
|
|
4
4
|
import { PressEvent } from '@react-types/shared';
|
|
5
5
|
export declare const badgeColors: readonly ["neutral", "blue", "navy", "violet", "teal", "lilac", "green", "orange", "red", "dark", "light", "dark-static", "light-static"];
|
|
6
6
|
export type BadgeColors = (typeof badgeColors)[number];
|
|
7
|
-
export interface BadgeProps extends PropsWithChildren, FlowComponentProps
|
|
7
|
+
export interface BadgeProps extends PropsWithChildren, FlowComponentProps<HTMLSpanElement>, PropsWithClassName {
|
|
8
8
|
/** Handler that is called when the badge is pressed. */
|
|
9
9
|
onPress?: (e: PressEvent) => void;
|
|
10
10
|
/** Handler that is called when the badges close icon is pressed. */
|
|
@@ -15,5 +15,5 @@ export interface BadgeProps extends PropsWithChildren, FlowComponentProps, Props
|
|
|
15
15
|
isDisabled?: boolean;
|
|
16
16
|
}
|
|
17
17
|
/** @flr-generate all */
|
|
18
|
-
export declare const Badge: import('react').FunctionComponent<BadgeProps & import('react').RefAttributes<
|
|
18
|
+
export declare const Badge: import('react').FunctionComponent<BadgeProps & import('react').RefAttributes<HTMLSpanElement>>;
|
|
19
19
|
export default Badge;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mittwald/flow-react-components",
|
|
3
|
-
"version": "1.6.0-next.
|
|
3
|
+
"version": "1.6.0-next.34",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React implementation of Flow, mittwald’s design system",
|
|
6
6
|
"homepage": "https://flow.mittwald.de",
|
|
@@ -84,9 +84,9 @@
|
|
|
84
84
|
"@internationalized/string-compiler": "^3.4.1",
|
|
85
85
|
"@lezer/common": "^1.5.2",
|
|
86
86
|
"@lezer/highlight": "^1.2.3",
|
|
87
|
-
"@mittwald/flow-icons": "^1.6.0-next.
|
|
87
|
+
"@mittwald/flow-icons": "^1.6.0-next.34",
|
|
88
88
|
"@mittwald/password-tools-js": "^3.0.0",
|
|
89
|
-
"@mittwald/react-tunnel": "^1.6.0-next.
|
|
89
|
+
"@mittwald/react-tunnel": "^1.6.0-next.34",
|
|
90
90
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
91
91
|
"@react-aria/form": "^3.2.1",
|
|
92
92
|
"@react-aria/i18n": "^3.13.1",
|
|
@@ -139,13 +139,13 @@
|
|
|
139
139
|
"@internationalized/date": "^3.12.3",
|
|
140
140
|
"@lezer/generator": "^1.8.0",
|
|
141
141
|
"@lezer/lr": "^1.4.10",
|
|
142
|
-
"@mittwald/flow-components-base": "1.6.0-next.
|
|
143
|
-
"@mittwald/flow-core": "1.6.0-next.
|
|
144
|
-
"@mittwald/flow-design-tokens": "1.6.0-next.
|
|
145
|
-
"@mittwald/flow-icons-base": "1.6.0-next.
|
|
142
|
+
"@mittwald/flow-components-base": "1.6.0-next.34",
|
|
143
|
+
"@mittwald/flow-core": "1.6.0-next.34",
|
|
144
|
+
"@mittwald/flow-design-tokens": "1.6.0-next.34",
|
|
145
|
+
"@mittwald/flow-icons-base": "1.6.0-next.34",
|
|
146
146
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
147
147
|
"@mittwald/remote-dom-react": "1.2.2-mittwald.10",
|
|
148
|
-
"@mittwald/typescript-config": "1.6.0-next.
|
|
148
|
+
"@mittwald/typescript-config": "1.6.0-next.34",
|
|
149
149
|
"@nx/storybook": "^22.7.6",
|
|
150
150
|
"@storybook/addon-a11y": "^10.5.10",
|
|
151
151
|
"@storybook/addon-actions": "^9.0.8",
|
|
@@ -199,7 +199,7 @@
|
|
|
199
199
|
},
|
|
200
200
|
"peerDependencies": {
|
|
201
201
|
"@internationalized/date": "^3.12.2",
|
|
202
|
-
"@mittwald/flow-icons-pro": "1.6.0-next.
|
|
202
|
+
"@mittwald/flow-icons-pro": "1.6.0-next.34",
|
|
203
203
|
"@mittwald/react-use-promise": "^4.2.2",
|
|
204
204
|
"next": "^16.2.3",
|
|
205
205
|
"react": "^19.2.0",
|
|
@@ -223,5 +223,5 @@
|
|
|
223
223
|
"browserslist": [
|
|
224
224
|
"baseline widely available"
|
|
225
225
|
],
|
|
226
|
-
"gitHead": "
|
|
226
|
+
"gitHead": "8167fb151dcf9862111473596d812b2b928f52c8"
|
|
227
227
|
}
|