@fairmint/ui 0.3.18 → 0.3.20
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/components/generic/Banner/Banner.cjs +3 -1
- package/dist/components/generic/Banner/Banner.cjs.map +1 -1
- package/dist/components/generic/Banner/Banner.d.ts.map +1 -1
- package/dist/components/generic/Banner/Banner.js +3 -1
- package/dist/components/generic/Banner/Banner.js.map +1 -1
- package/dist/components/generic/NotificationRow/NotificationRow.cjs +169 -0
- package/dist/components/generic/NotificationRow/NotificationRow.cjs.map +1 -0
- package/dist/components/generic/NotificationRow/NotificationRow.d.ts +51 -0
- package/dist/components/generic/NotificationRow/NotificationRow.d.ts.map +1 -0
- package/dist/components/generic/NotificationRow/NotificationRow.js +169 -0
- package/dist/components/generic/NotificationRow/NotificationRow.js.map +1 -0
- package/dist/components/generic/TaskRow/TaskRow.cjs +151 -0
- package/dist/components/generic/TaskRow/TaskRow.cjs.map +1 -0
- package/dist/components/generic/TaskRow/TaskRow.d.ts +56 -0
- package/dist/components/generic/TaskRow/TaskRow.d.ts.map +1 -0
- package/dist/components/generic/TaskRow/TaskRow.js +151 -0
- package/dist/components/generic/TaskRow/TaskRow.js.map +1 -0
- package/dist/components/primitives/Alert/Alert.cjs +6 -0
- package/dist/components/primitives/Alert/Alert.cjs.map +1 -1
- package/dist/components/primitives/Alert/Alert.d.ts.map +1 -1
- package/dist/components/primitives/Alert/Alert.js +6 -0
- package/dist/components/primitives/Alert/Alert.js.map +1 -1
- package/dist/fairmint-ui.cjs +4 -0
- package/dist/fairmint-ui.cjs.map +1 -1
- package/dist/fairmint-ui.js +4 -0
- package/dist/fairmint-ui.js.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -252,7 +252,9 @@ function Banner({
|
|
|
252
252
|
style: {
|
|
253
253
|
color: tokens.icon,
|
|
254
254
|
gridArea: "icon",
|
|
255
|
-
|
|
255
|
+
// Top-left of the container — matches Alert; stays with the title
|
|
256
|
+
// when description/actions stretch the grid row span.
|
|
257
|
+
alignSelf: "start"
|
|
256
258
|
},
|
|
257
259
|
children: iconNode
|
|
258
260
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n /** Visible action label. */\n label: ReactNode;\n}\n\nexport type BannerActions =\n | readonly [BannerActionProps]\n | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n title?: ReactNode;\n /** Supporting context. Omit for a title-only banner. */\n description?: ReactNode;\n /** Semantic meaning and visual treatment. @default \"brand\" */\n tone?: BannerTone;\n /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n presentation?: BannerPresentation;\n /** Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. */\n icon?: ReactNode | null;\n /** Optional badge label displayed beside the title. */\n badgeLabel?: ReactNode;\n /** Optional standardized CTA. */\n action?: BannerActionProps;\n /** Up to two CTAs in visual order: secondary first, primary last. */\n actions?: BannerActions;\n /** Override the default accessible role. Error defaults to alert; other tones use status. */\n role?: AriaRole;\n /** Accessible label for the banner region. Defaults to the string title when possible. */\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle || hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") || \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" || typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined || badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n alignSelf: \"center\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined || badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","radii","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.cjs","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n /** Visible action label. */\n label: ReactNode;\n}\n\nexport type BannerActions =\n | readonly [BannerActionProps]\n | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n title?: ReactNode;\n /** Supporting context. Omit for a title-only banner. */\n description?: ReactNode;\n /** Semantic meaning and visual treatment. @default \"brand\" */\n tone?: BannerTone;\n /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n presentation?: BannerPresentation;\n /** Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. */\n icon?: ReactNode | null;\n /** Optional badge label displayed beside the title. */\n badgeLabel?: ReactNode;\n /** Optional standardized CTA. */\n action?: BannerActionProps;\n /** Up to two CTAs in visual order: secondary first, primary last. */\n actions?: BannerActions;\n /** Override the default accessible role. Error defaults to alert; other tones use status. */\n role?: AriaRole;\n /** Accessible label for the banner region. Defaults to the string title when possible. */\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle || hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") || \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" || typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined || badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n // Top-left of the container — matches Alert; stays with the title\n // when description/actions stretch the grid row span.\n alignSelf: \"start\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined || badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":["colors","fairmintVars","jsxs","jsx","radii","Text","Box","fontSizes","layout","spacing","ThemeIcon","Group","Badge","index","Button"],"mappings":";;;;;;;;;;;;;AA4CA,MAAM,cAAc;AAAA,EAClB,OAAOA,OAAAA,OAAO;AAAA,EACd,SAASA,OAAAA,OAAO;AAAA,EAChB,MAAMA,OAAAA,OAAO;AAAA,EACb,SAASA,OAAAA,OAAO;AAAA,EAChB,SAASA,OAAAA,OAAO;AAAA,EAChB,OAAOA,OAAAA,OAAO;AAChB;AAEA,MAAM,cAAc;AAAA,EAClB,OAAO;AAAA,IACL,YAAYC,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAAA,EAErB,SAAS;AAAA,IACP,YAAYA,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAAA,EAErB,MAAM;AAAA,IACJ,YAAYA,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAAA,EAErB,SAAS;AAAA,IACP,YAAYA,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAAA,EAErB,SAAS;AAAA,IACP,YAAYA,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAAA,EAErB,OAAO;AAAA,IACL,YAAYA,MAAAA,aAAa;AAAA,IACzB,QAAQA,MAAAA,aAAa;AAAA,IACrB,MAAMA,MAAAA,aAAa;AAAA,EAAA;AAEvB;AAEA,MAAM,oBAAoB,CAAC,EAAE,WAAiC;AAC5D,QAAM,cAAc;AAAA,IAClB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,eAAe;AAAA,IACf,gBAAgB;AAAA,IAChB,eAAe;AAAA,EAAA;AAGjB,MAAI,SAAS,WAAW;AACtB,WACEC,2BAAAA,KAAC,OAAA,EAAK,GAAG,aACP,UAAA;AAAA,MAAAC,2BAAAA,IAAC,WAAM,UAAA,UAAA,CAAO;AAAA,qCACb,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,MAC9BA,2BAAAA,IAAC,QAAA,EAAK,GAAE,4BAAA,CAA4B;AAAA,IAAA,GACtC;AAAA,EAEJ;AAEA,MAAI,SAAS,WAAW;AACtB,WACED,2BAAAA,KAAC,OAAA,EAAK,GAAG,aACP,UAAA;AAAA,MAAAC,2BAAAA,IAAC,WAAM,UAAA,UAAA,CAAO;AAAA,MACdA,2BAAAA,IAAC,QAAA,EAAK,GAAE,oFAAA,CAAoF;AAAA,MAC5FA,2BAAAA,IAAC,QAAA,EAAK,GAAE,UAAA,CAAU;AAAA,MAClBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,aAAA,CAAa;AAAA,IAAA,GACvB;AAAA,EAEJ;AAEA,MAAI,SAAS,SAAS;AACpB,WACED,2BAAAA,KAAC,OAAA,EAAK,GAAG,aACP,UAAA;AAAA,MAAAC,2BAAAA,IAAC,WAAM,UAAA,QAAA,CAAK;AAAA,qCACX,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,MAC9BA,2BAAAA,IAAC,QAAA,EAAK,GAAE,WAAA,CAAW;AAAA,MACnBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,YAAA,CAAY;AAAA,IAAA,GACtB;AAAA,EAEJ;AAEA,SACED,2BAAAA,KAAC,OAAA,EAAK,GAAG,aACP,UAAA;AAAA,IAAAC,2BAAAA,IAAC,WAAM,UAAA,cAAA,CAAW;AAAA,mCACjB,UAAA,EAAO,IAAG,MAAK,IAAG,MAAK,GAAE,KAAI;AAAA,IAC9BA,2BAAAA,IAAC,QAAA,EAAK,GAAE,WAAA,CAAW;AAAA,IACnBA,2BAAAA,IAAC,QAAA,EAAK,GAAE,YAAA,CAAY;AAAA,EAAA,GACtB;AAEJ;AAEA,MAAM,eAAe,CAAC,MAAkB,iBAAqC;AAC3E,QAAM,SAAS,YAAY,IAAI;AAE/B,MAAI,iBAAiB,cAAc;AACjC,WAAO;AAAA,MACL,OAAO;AAAA,QACL,iBAAiB,OAAO;AAAA,QACxB,cAAc;AAAA,MAAA;AAAA,IAChB;AAAA,EAEJ;AAEA,SAAO;AAAA,IACL,OAAO;AAAA,MACL,iBAAiB,OAAO;AAAA,MACxB,QAAQ,aAAa,OAAO,MAAM;AAAA,MAClC,cAAcC,MAAAA,MAAM;AAAA,IAAA;AAAA,EACtB;AAEJ;AAOA,MAAM,aAAa,MAAMH,MAAAA,aAAa;AAEtC,MAAM,gBAAgB,CAAC,MAAkB,gBAAiD;AACxF,MAAI,YAAa,QAAO;AACxB,MAAI,SAAS,QAAS,QAAO;AAC7B,MAAI,SAAS,UAAW,QAAO;AAC/B,SAAO;AACT;AASA,MAAM,kBAAkB,CAAC;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAA2B;AACzB,QAAM,gBAAgB,UAAU,wBAAwB;AACxD,QAAM,wBAAwB,UAAU,CAAC,MAAM,IAAI,CAAA;AAEnD,MAAI,YAAY,gBAAgB;AAC9B,0BAAsB,KAAK,gBAAgB;AAAA,EAC7C;AAEA,MAAI,YAAY;AACd,0BAAsB,KAAK,MAAM;AAAA,EACnC;AAEA,QAAM,aAAuB,CAAA;AAC7B,MAAI,WAAW,SAAU,YAAW,KAAK,cAAc;AAAA,WAC9C,QAAS,YAAW,KAAK,aAAa;AAAA,WACtC,SAAU,YAAW,KAAK,SAAS;AAE5C,MAAI,eAAgB,YAAW,KAAK,UAAU,8BAA8B,eAAe;AAC3F,MAAI,WAAY,YAAW,KAAK,UAAU,sBAAsB,WAAW;AAE3E,QAAM,cAAwB,CAAA;AAC9B,QAAM,aAAa,aAAa,aAAa;AAC7C,MAAI,WAAW,YAAY,gBAAgB;AACzC,gBAAY,KAAK,cAAc,UAAU,KAAK,oBAAoB,UAAU,GAAG;AAAA,EACjF,WAAW,WAAW,UAAU;AAC9B,gBAAY,KAAK,cAAc,UAAU,GAAG;AAAA,EAC9C,WAAW,WAAW,gBAAgB;AACpC,gBAAY,KAAK,oBAAoB,UAAU,GAAG;AAAA,EACpD,WAAW,SAAS;AAClB,gBAAY,KAAK,QAAQ,aAAa,aAAa,EAAE,GAAG;AAAA,EAC1D,WAAW,YAAY,gBAAgB;AACrC,gBAAY,KAAK,SAAS,UAAU,KAAK,eAAe,UAAU,GAAG;AAAA,EACvE,WAAW,UAAU;AACnB,gBAAY,KAAK,SAAS,UAAU,GAAG;AAAA,EACzC,WAAW,gBAAgB;AACzB,gBAAY,KAAK,eAAe,UAAU,GAAG;AAAA,EAC/C,WAAW,YAAY;AACrB,gBAAY,KAAK,WAAW;AAAA,EAC9B;AAEA,SAAO;AAAA,IACL,mBAAmB;AAAA,MACjB,MAAM,WAAW,KAAK,GAAG;AAAA,MACzB,IAAI,YAAY,KAAK,GAAG;AAAA,IAAA;AAAA,IAE1B,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,IAAI,sBAAsB,KAAK,GAAG,KAAK;AAAA,IAAA;AAAA,EACzC;AAEJ;AAEA,MAAM,uBAAuB;AAAA,EAC3B,MAAM;AAAA,EACN,GAAGA,MAAAA,aAAa;AAAA,EAChB,OAAO,EAAE,YAAY,IAAA;AACvB;AAEA,SAAS,kBAAkB,EAAE,YAAqC;AAChE,MAAI,OAAO,aAAa,YAAY,OAAO,aAAa,UAAU;AAChE,WAAOE,2BAAAA,IAACE,KAAAA,MAAA,EAAM,GAAG,sBAAuB,SAAA,CAAS;AAAA,EACnD;AAEA,SACEF,2BAAAA;AAAAA,IAACG,OAAAA;AAAAA,IAAA;AAAA,MACC,GAAGL,MAAAA,aAAa;AAAA,MAChB,OAAO;AAAA,QACL,UAAUM,UAAAA,UAAU;AAAA,QACpB,YAAY;AAAA,MAAA;AAAA,MAGb;AAAA,IAAA;AAAA,EAAA;AAGP;AAMO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AACT,GAAgB;AACd,QAAM,QAAQ,YAAY,IAAI;AAC9B,QAAM,SAAS,YAAY,IAAI;AAC/B,QAAM,WAAW,SAAS,SAAYJ,2BAAAA,IAAC,mBAAA,EAAkB,MAAY,IAAK;AAC1E,QAAM,kBAAkB,YAAY,WAAW,SAAY,CAAA,IAAK,CAAC,MAAM;AACvE,QAAM,eAAe,SAAS,SAAS,UAAU,UAAU;AAC3D,QAAM,oBAAoB,cAAc,OAAO,UAAU,WAAW,QAAQ;AAC5E,QAAM,UAAU,aAAa,MAAM,YAAY;AAC/C,QAAMK,WAAS,gBAAgB;AAAA,IAC7B,YAAY,gBAAgB,SAAS;AAAA,IACrC,gBAAgB,gBAAgB;AAAA,IAChC,SAAS,aAAa;AAAA,IACtB,UAAU,UAAU,UAAa,eAAe;AAAA,EAAA,CACjD;AAED,SACEN,2BAAAA;AAAAA,IAACI,OAAAA;AAAAA,IAAA;AAAA,MACC,cAAY;AAAA,MACZ;AAAA,MACA,qBAAmB;AAAA,MACnB,aAAW;AAAA,MACX,MAAM;AAAA,MACN,IAAG;AAAA,MACH,IAAG;AAAA,MACH,IAAG;AAAA,MACH,OAAO;AAAA,QACL,WAAW;AAAA,QACX,OAAO;AAAA,QACP,GAAG,QAAQ;AAAA,QACX,GAAG;AAAA,MAAA;AAAA,MAEL,IAAI;AAAA,QACF,SAAS;AAAA;AAAA,QAET,WAAWG,QAAAA,QAAQ;AAAA,QACnB,QAAQ;AAAA,QACR,GAAGD;AAAAA,MAAA;AAAA,MAGJ,UAAA;AAAA,QAAA,aAAa,QACZL,2BAAAA;AAAAA,UAACO,UAAAA;AAAAA,UAAA;AAAA,YACC,eAAW;AAAA,YACX;AAAA,YACA,QAAO;AAAA,YACP,MAAM;AAAA,YACN,SAAQ;AAAA,YACR,OAAO;AAAA,cACL,OAAO,OAAO;AAAA,cACd,UAAU;AAAA;AAAA;AAAA,cAGV,WAAW;AAAA,YAAA;AAAA,YAGZ,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,SAIH,UAAU,UAAa,eAAe,WACtCR,2BAAAA;AAAAA,UAACS,MAAAA;AAAAA,UAAA;AAAA,YACC,OAAM;AAAA,YACN,KAAI;AAAA,YACJ,MAAK;AAAA,YACL,OAAO,EAAE,UAAU,SAAS,UAAU,GAAG,cAAc,WAAA;AAAA,YAEtD,UAAA;AAAA,cAAA,UAAU,UACTR,2BAAAA;AAAAA,gBAACE,KAAAA;AAAAA,gBAAA;AAAA,kBACC,IAAI;AAAA,kBACJ,MAAK;AAAA,kBACL,GAAG,WAAA;AAAA,kBACH,OAAO,EAAE,YAAY,MAAM,UAAU,GAAG,cAAc,WAAA;AAAA,kBAErD,UAAA;AAAA,gBAAA;AAAA,cAAA;AAAA,cAGJ,eAAe,UACdF,+BAACS,MAAAA,OAAA,EAAM,OAAc,MAAK,MAAK,SAAQ,SACpC,UAAA,WAAA,CACH;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAKL,gBAAgB,UACfT,2BAAAA,IAACG,OAAAA,KAAA,EAAI,OAAO,EAAE,UAAU,eAAe,UAAU,GAAG,cAAc,WAAA,GAChE,UAAAH,2BAAAA,IAAC,mBAAA,EAAmB,uBAAY,GAClC;AAAA,QAGD,gBAAgB,SAAS,KACxBA,2BAAAA;AAAAA,UAACG,OAAAA;AAAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,eAAe,EAAE,MAAM,UAAU,IAAI,MAAA;AAAA,cACrC,YAAY;AAAA,cACZ,gBAAgB;AAAA,cAChB,KAAKG,QAAAA,QAAQ;AAAA,cACb,UAAU;AAAA,cACV,OAAO,EAAE,MAAM,QAAQ,IAAI,cAAA;AAAA,cAC3B,UAAU;AAAA,YAAA;AAAA,YAEZ,OAAO,EAAE,UAAU,WAAW,WAAW,UAAU,aAAa,MAAA;AAAA,YAE/D,UAAA,gBAAgB,IAAI,CAAC,EAAE,OAAO,MAAM,GAAG,eAAeI,WACrDV,2BAAAA;AAAAA,cAACW,OAAAA;AAAAA,cAAA;AAAA,gBAEE,GAAG;AAAA,gBACJ;AAAA,gBACA,MAAM,QAAQ;AAAA,gBACd,SAAS,cAAc,MAAMD,SAAQ,gBAAgB,SAAS,CAAC;AAAA,gBAC/D,OAAO;AAAA,kBACL,GAAG,YAAY;AAAA,kBACf,WAAW;AAAA,kBACX,MAAM;AAAA,kBACN,UAAU;AAAA,kBACV,cAAc;AAAA,kBACd,YAAY;AAAA,kBACZ,OAAO;AAAA,gBAAA;AAAA,gBAGR,UAAA;AAAA,cAAA;AAAA,cAfI,YAAY,OAAO,OAAO,UAAU,WAAW,QAAQ,iBAAiBA,MAAK;AAAA,YAAA,CAiBrF;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA;AAIR;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ND;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIhE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,gCAAgC,CAAC;AAG1E,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,CAAC;AACxF,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,YAAY,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,WAAW,EAAE,UAAU,GAAG,OAAO,GAAG,SAAS,CAAC;IAC5F,4BAA4B;IAC5B,KAAK,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,MAAM,aAAa,GACrB,SAAS,CAAC,iBAAiB,CAAC,GAC5B,SAAS,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,CAAC;AAEpD,MAAM,WAAW,WAAW;IAC1B,oGAAoG;IACpG,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,wDAAwD;IACxD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8DAA8D;IAC9D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,kFAAkF;IAClF,YAAY,CAAC,EAAE,kBAAkB,CAAC;IAClC,qFAAqF;IACrF,IAAI,CAAC,EAAE,SAAS,GAAG,IAAI,CAAC;IACxB,uDAAuD;IACvD,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,iCAAiC;IACjC,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,qEAAqE;IACrE,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6FAA6F;IAC7F,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AA8ND;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EACrB,MAAM,EACN,SAAS,EACT,UAAU,EACV,SAAS,EACT,WAAW,EACX,IAAI,EACJ,OAAO,EACP,YAAuB,EACvB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,IAAc,GACf,EAAE,WAAW,2CA+Hb"}
|
|
@@ -250,7 +250,9 @@ function Banner({
|
|
|
250
250
|
style: {
|
|
251
251
|
color: tokens.icon,
|
|
252
252
|
gridArea: "icon",
|
|
253
|
-
|
|
253
|
+
// Top-left of the container — matches Alert; stays with the title
|
|
254
|
+
// when description/actions stretch the grid row span.
|
|
255
|
+
alignSelf: "start"
|
|
254
256
|
},
|
|
255
257
|
children: iconNode
|
|
256
258
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n /** Visible action label. */\n label: ReactNode;\n}\n\nexport type BannerActions =\n | readonly [BannerActionProps]\n | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n title?: ReactNode;\n /** Supporting context. Omit for a title-only banner. */\n description?: ReactNode;\n /** Semantic meaning and visual treatment. @default \"brand\" */\n tone?: BannerTone;\n /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n presentation?: BannerPresentation;\n /** Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. */\n icon?: ReactNode | null;\n /** Optional badge label displayed beside the title. */\n badgeLabel?: ReactNode;\n /** Optional standardized CTA. */\n action?: BannerActionProps;\n /** Up to two CTAs in visual order: secondary first, primary last. */\n actions?: BannerActions;\n /** Override the default accessible role. Error defaults to alert; other tones use status. */\n role?: AriaRole;\n /** Accessible label for the banner region. Defaults to the string title when possible. */\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle || hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") || \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" || typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined || badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n alignSelf: \"center\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined || badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Banner.js","sources":["../../../../src/components/generic/Banner/Banner.tsx"],"sourcesContent":["import type { AriaRole, CSSProperties, ReactNode } from \"react\";\nimport { fairmintVars, fontSizes, radii, spacing } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Button, type ButtonProps } from \"../../primitives/Button/Button\";\nimport { Box, Group, Text, ThemeIcon } from \"../../primitives/layout\";\n\nexport type BannerTone = \"brand\" | \"neutral\" | \"info\" | \"success\" | \"warning\" | \"error\";\nexport type BannerPresentation = \"inline\" | \"page-level\";\n\nexport interface BannerActionProps extends Omit<ButtonProps, \"children\" | \"color\" | \"variant\"> {\n /** Visible action label. */\n label: ReactNode;\n}\n\nexport type BannerActions =\n | readonly [BannerActionProps]\n | readonly [BannerActionProps, BannerActionProps];\n\nexport interface BannerProps {\n /** Primary message. Omit when the banner is description-only; set `ariaLabel` for accessibility. */\n title?: ReactNode;\n /** Supporting context. Omit for a title-only banner. */\n description?: ReactNode;\n /** Semantic meaning and visual treatment. @default \"brand\" */\n tone?: BannerTone;\n /** Inline content callout or full-width page-edge treatment. @default \"inline\" */\n presentation?: BannerPresentation;\n /** Icon shown beside the title. Pass `null` to hide. Default is a 20px tone icon. */\n icon?: ReactNode | null;\n /** Optional badge label displayed beside the title. */\n badgeLabel?: ReactNode;\n /** Optional standardized CTA. */\n action?: BannerActionProps;\n /** Up to two CTAs in visual order: secondary first, primary last. */\n actions?: BannerActions;\n /** Override the default accessible role. Error defaults to alert; other tones use status. */\n role?: AriaRole;\n /** Accessible label for the banner region. Defaults to the string title when possible. */\n ariaLabel?: string;\n className?: string;\n style?: CSSProperties;\n}\n\nconst TONE_COLORS = {\n brand: colors.primary,\n neutral: colors.neutral,\n info: colors.info,\n success: colors.success,\n warning: colors.warning,\n error: colors.error,\n} as const;\n\nconst TONE_TOKENS = {\n brand: {\n background: fairmintVars.colorBgBrandSubtle,\n border: fairmintVars.colorBorderFocus,\n icon: fairmintVars.colorBrandPrimary,\n },\n neutral: {\n background: fairmintVars.colorBgSurfaceSecondary,\n border: fairmintVars.colorBorderDefault,\n icon: fairmintVars.colorIconSecondary,\n },\n info: {\n background: fairmintVars.colorInfoBg,\n border: fairmintVars.colorInfoBorder,\n icon: fairmintVars.colorInfoText,\n },\n success: {\n background: fairmintVars.colorSuccessBg,\n border: fairmintVars.colorSuccessBorder,\n icon: fairmintVars.colorSuccessText,\n },\n warning: {\n background: fairmintVars.colorWarningBg,\n border: fairmintVars.colorWarningBorder,\n icon: fairmintVars.colorWarningText,\n },\n error: {\n background: fairmintVars.colorErrorBg,\n border: fairmintVars.colorErrorBorder,\n icon: fairmintVars.colorErrorText,\n },\n} as const;\n\nconst DefaultStatusIcon = ({ tone }: { tone: BannerTone }) => {\n const commonProps = {\n width: 20,\n height: 20,\n viewBox: \"0 0 24 24\",\n fill: \"none\",\n stroke: \"currentColor\",\n strokeWidth: 1.75,\n strokeLinecap: \"round\" as const,\n strokeLinejoin: \"round\" as const,\n \"aria-hidden\": true,\n };\n\n if (tone === \"success\") {\n return (\n <svg {...commonProps}>\n <title>Success</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m8.5 12 2.25 2.25L15.75 9\" />\n </svg>\n );\n }\n\n if (tone === \"warning\") {\n return (\n <svg {...commonProps}>\n <title>Warning</title>\n <path d=\"M10.3 4.2 2.6 18a2 2 0 0 0 1.75 3h15.3a2 2 0 0 0 1.75-3L13.7 4.2a2 2 0 0 0-3.4 0Z\" />\n <path d=\"M12 9v4\" />\n <path d=\"M12 17h.01\" />\n </svg>\n );\n }\n\n if (tone === \"error\") {\n return (\n <svg {...commonProps}>\n <title>Error</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"m9 9 6 6\" />\n <path d=\"m15 9-6 6\" />\n </svg>\n );\n }\n\n return (\n <svg {...commonProps}>\n <title>Information</title>\n <circle cx=\"12\" cy=\"12\" r=\"9\" />\n <path d=\"M12 11v5\" />\n <path d=\"M12 8h.01\" />\n </svg>\n );\n};\n\nconst surfaceProps = (tone: BannerTone, presentation: BannerPresentation) => {\n const tokens = TONE_TOKENS[tone];\n\n if (presentation === \"page-level\") {\n return {\n style: {\n backgroundColor: tokens.background,\n borderRadius: 0,\n } satisfies CSSProperties,\n };\n }\n\n return {\n style: {\n backgroundColor: tokens.background,\n border: `1px solid ${tokens.border}`,\n borderRadius: radii.lg,\n } satisfies CSSProperties,\n };\n};\n\n/**\n * Banner titles always use primary text color regardless of tone or\n * presentation — tinted semantic shades are reserved for the fill/border/icon,\n * keeping title contrast consistent (and WCAG AA) across color schemes.\n */\nconst titleColor = () => fairmintVars.colorTextPrimary;\n\nconst actionVariant = (tone: BannerTone, isSecondary: boolean): ButtonProps[\"variant\"] => {\n if (isSecondary) return \"outline\";\n if (tone === \"brand\") return \"light\";\n if (tone === \"neutral\") return \"outline\";\n return \"filled\";\n};\n\ninterface BannerLayoutOptions {\n hasIcon: boolean;\n hasTitle: boolean;\n hasDescription: boolean;\n hasActions: boolean;\n}\n\nconst getBannerLayout = ({\n hasActions,\n hasDescription,\n hasIcon,\n hasTitle,\n}: BannerLayoutOptions) => {\n const mobileColumns = hasIcon ? \"20px minmax(0, 1fr)\" : \"minmax(0, 1fr)\";\n const desktopContentColumns = hasIcon ? [\"20px\"] : [];\n\n if (hasTitle || hasDescription) {\n desktopContentColumns.push(\"minmax(0, 1fr)\");\n }\n\n if (hasActions) {\n desktopContentColumns.push(\"auto\");\n }\n\n const mobileRows: string[] = [];\n if (hasIcon && hasTitle) mobileRows.push('\"icon title\"');\n else if (hasIcon) mobileRows.push('\"icon icon\"');\n else if (hasTitle) mobileRows.push('\"title\"');\n\n if (hasDescription) mobileRows.push(hasIcon ? '\"description description\"' : '\"description\"');\n if (hasActions) mobileRows.push(hasIcon ? '\"actions actions\"' : '\"actions\"');\n\n const desktopRows: string[] = [];\n const actionCell = hasActions ? \" actions\" : \"\";\n if (hasIcon && hasTitle && hasDescription) {\n desktopRows.push(`\"icon title${actionCell}\"`, `\"icon description${actionCell}\"`);\n } else if (hasIcon && hasTitle) {\n desktopRows.push(`\"icon title${actionCell}\"`);\n } else if (hasIcon && hasDescription) {\n desktopRows.push(`\"icon description${actionCell}\"`);\n } else if (hasIcon) {\n desktopRows.push(`\"icon${hasActions ? \" actions\" : \"\"}\"`);\n } else if (hasTitle && hasDescription) {\n desktopRows.push(`\"title${actionCell}\"`, `\"description${actionCell}\"`);\n } else if (hasTitle) {\n desktopRows.push(`\"title${actionCell}\"`);\n } else if (hasDescription) {\n desktopRows.push(`\"description${actionCell}\"`);\n } else if (hasActions) {\n desktopRows.push('\"actions\"');\n }\n\n return {\n gridTemplateAreas: {\n base: mobileRows.join(\" \"),\n sm: desktopRows.join(\" \"),\n },\n gridTemplateColumns: {\n base: mobileColumns,\n sm: desktopContentColumns.join(\" \") || \"auto\",\n },\n };\n};\n\nconst descriptionTextProps = {\n size: \"sm\" as const,\n c: fairmintVars.colorTextSecondary,\n style: { lineHeight: 1.4 },\n};\n\nfunction BannerDescription({ children }: { children: ReactNode }) {\n if (typeof children === \"string\" || typeof children === \"number\") {\n return <Text {...descriptionTextProps}>{children}</Text>;\n }\n\n return (\n <Box\n c={fairmintVars.colorTextSecondary}\n style={{\n fontSize: fontSizes.sm,\n lineHeight: 1.4,\n }}\n >\n {children}\n </Box>\n );\n}\n\n/**\n * Persistent contextual guidance with semantic inline and page-level presentations.\n * Position page-level banners in the consuming layout; the component does not use fixed positioning.\n */\nexport function Banner({\n action,\n ariaLabel,\n badgeLabel,\n className,\n description,\n icon,\n actions,\n presentation = \"inline\",\n role,\n style,\n title,\n tone = \"brand\",\n}: BannerProps) {\n const color = TONE_COLORS[tone];\n const tokens = TONE_TOKENS[tone];\n const iconNode = icon === undefined ? <DefaultStatusIcon tone={tone} /> : icon;\n const resolvedActions = actions ?? (action === undefined ? [] : [action]);\n const resolvedRole = role ?? (tone === \"error\" ? \"alert\" : \"status\");\n const resolvedAriaLabel = ariaLabel ?? (typeof title === \"string\" ? title : undefined);\n const surface = surfaceProps(tone, presentation);\n const layout = getBannerLayout({\n hasActions: resolvedActions.length > 0,\n hasDescription: description !== undefined,\n hasIcon: iconNode !== null,\n hasTitle: title !== undefined || badgeLabel !== undefined,\n });\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n className={className}\n data-presentation={presentation}\n data-tone={tone}\n role={resolvedRole}\n pl=\"md\"\n pr=\"lg\"\n py=\"md\"\n style={{\n boxSizing: \"border-box\",\n width: \"100%\",\n ...surface.style,\n ...style,\n }}\n sx={{\n display: \"grid\",\n // Match Alert: icon→copy uses spacing.md; title→body is tighter than xs.\n columnGap: spacing.md,\n rowGap: \"0.25rem\",\n ...layout,\n }}\n >\n {iconNode !== null && (\n <ThemeIcon\n aria-hidden\n color={color}\n radius=\"sm\"\n size={20}\n variant=\"transparent\"\n style={{\n color: tokens.icon,\n gridArea: \"icon\",\n // Top-left of the container — matches Alert; stays with the title\n // when description/actions stretch the grid row span.\n alignSelf: \"start\",\n }}\n >\n {iconNode}\n </ThemeIcon>\n )}\n\n {(title !== undefined || badgeLabel !== undefined) && (\n <Group\n align=\"center\"\n gap=\"xs\"\n wrap=\"wrap\"\n style={{ gridArea: \"title\", minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title !== undefined && (\n <Text\n fw={600}\n size=\"md\"\n c={titleColor()}\n style={{ lineHeight: 1.35, minWidth: 0, overflowWrap: \"anywhere\" }}\n >\n {title}\n </Text>\n )}\n {badgeLabel !== undefined && (\n <Badge color={color} size=\"sm\" variant=\"light\">\n {badgeLabel}\n </Badge>\n )}\n </Group>\n )}\n\n {description !== undefined && (\n <Box style={{ gridArea: \"description\", minWidth: 0, overflowWrap: \"anywhere\" }}>\n <BannerDescription>{description}</BannerDescription>\n </Box>\n )}\n\n {resolvedActions.length > 0 && (\n <Box\n sx={{\n display: \"flex\",\n flexDirection: { base: \"column\", sm: \"row\" },\n alignItems: \"stretch\",\n justifyContent: \"flex-end\",\n gap: spacing.xs,\n minWidth: 0,\n width: { base: \"100%\", sm: \"max-content\" },\n maxWidth: \"100%\",\n }}\n style={{ gridArea: \"actions\", alignSelf: \"center\", justifySelf: \"end\" }}\n >\n {resolvedActions.map(({ label, size, ...buttonProps }, index) => (\n <Button\n key={buttonProps.id ?? (typeof label === \"string\" ? label : `banner-action-${index}`)}\n {...buttonProps}\n color={color}\n size={size ?? \"sm\"}\n variant={actionVariant(tone, index < resolvedActions.length - 1)}\n style={{\n ...buttonProps.style,\n boxSizing: \"border-box\",\n flex: \"0 1 auto\",\n maxWidth: \"100%\",\n overflowWrap: \"anywhere\",\n whiteSpace: \"normal\",\n width: \"100%\",\n }}\n >\n {label}\n </Button>\n ))}\n </Box>\n )}\n </Box>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const index = require("../../../theme/index.cjs");
|
|
5
|
+
const colors = require("../../../theme/colors.cjs");
|
|
6
|
+
const ActionIcon = require("../../primitives/ActionIcon/ActionIcon.cjs");
|
|
7
|
+
const Badge = require("../../primitives/Badge/Badge.cjs");
|
|
8
|
+
const layout = require("../../primitives/layout.cjs");
|
|
9
|
+
const ColorDot = require("../ColorDot/ColorDot.cjs");
|
|
10
|
+
const Group = require("../../../node_modules/@mantine/core/esm/components/Group/Group.cjs");
|
|
11
|
+
const Text = require("../../../node_modules/@mantine/core/esm/components/Text/Text.cjs");
|
|
12
|
+
const SEVERITY_BADGE_COLORS = {
|
|
13
|
+
critical: colors.colors.error,
|
|
14
|
+
high: colors.colors.warning,
|
|
15
|
+
medium: colors.colors.info,
|
|
16
|
+
low: colors.colors.neutral,
|
|
17
|
+
info: colors.colors.info,
|
|
18
|
+
success: colors.colors.success,
|
|
19
|
+
resolved: colors.colors.success
|
|
20
|
+
};
|
|
21
|
+
const DEFAULT_SEVERITY_LABELS = {
|
|
22
|
+
critical: "Critical",
|
|
23
|
+
high: "High",
|
|
24
|
+
medium: "Medium",
|
|
25
|
+
low: "Low",
|
|
26
|
+
info: "Info",
|
|
27
|
+
success: "Success",
|
|
28
|
+
resolved: "Completed"
|
|
29
|
+
};
|
|
30
|
+
function DefaultCheckIcon() {
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
"svg",
|
|
33
|
+
{
|
|
34
|
+
"aria-hidden": "true",
|
|
35
|
+
width: "16",
|
|
36
|
+
height: "16",
|
|
37
|
+
viewBox: "0 0 24 24",
|
|
38
|
+
fill: "none",
|
|
39
|
+
stroke: "currentColor",
|
|
40
|
+
strokeWidth: "2",
|
|
41
|
+
strokeLinecap: "round",
|
|
42
|
+
strokeLinejoin: "round",
|
|
43
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 6 9 17l-5-5" })
|
|
44
|
+
}
|
|
45
|
+
);
|
|
46
|
+
}
|
|
47
|
+
function DefaultMailIcon() {
|
|
48
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
49
|
+
"svg",
|
|
50
|
+
{
|
|
51
|
+
"aria-hidden": "true",
|
|
52
|
+
width: "16",
|
|
53
|
+
height: "16",
|
|
54
|
+
viewBox: "0 0 24 24",
|
|
55
|
+
fill: "none",
|
|
56
|
+
stroke: "currentColor",
|
|
57
|
+
strokeWidth: "2",
|
|
58
|
+
strokeLinecap: "round",
|
|
59
|
+
strokeLinejoin: "round",
|
|
60
|
+
children: [
|
|
61
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" }),
|
|
62
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "m22 6-10 7L2 6" })
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
);
|
|
66
|
+
}
|
|
67
|
+
function NotificationRow({
|
|
68
|
+
ariaLabel,
|
|
69
|
+
body,
|
|
70
|
+
className,
|
|
71
|
+
isUnread = false,
|
|
72
|
+
onToggleRead,
|
|
73
|
+
severity = "medium",
|
|
74
|
+
severityLabel,
|
|
75
|
+
timestamp,
|
|
76
|
+
title,
|
|
77
|
+
toggleReadLabel,
|
|
78
|
+
variant = "standalone",
|
|
79
|
+
withDivider = true
|
|
80
|
+
}) {
|
|
81
|
+
const resolvedSeverityLabel = severityLabel ?? DEFAULT_SEVERITY_LABELS[severity];
|
|
82
|
+
const resolvedToggleReadLabel = toggleReadLabel ?? (isUnread ? `Mark read: ${title}` : `Mark unread: ${title}`);
|
|
83
|
+
const readStateLabel = isUnread ? "Unread notification" : "Read notification";
|
|
84
|
+
const resolvedAriaLabel = ariaLabel ?? (timestamp ? `${title}. ${resolvedSeverityLabel}. ${readStateLabel}. ${timestamp}` : `${title}. ${resolvedSeverityLabel}. ${readStateLabel}`);
|
|
85
|
+
const isList = variant === "list";
|
|
86
|
+
const badgeColor = SEVERITY_BADGE_COLORS[severity];
|
|
87
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
88
|
+
layout.Box,
|
|
89
|
+
{
|
|
90
|
+
"aria-label": resolvedAriaLabel,
|
|
91
|
+
role: "group",
|
|
92
|
+
className,
|
|
93
|
+
"data-severity": severity,
|
|
94
|
+
"data-testid": "notification-row",
|
|
95
|
+
"data-unread": isUnread || void 0,
|
|
96
|
+
"data-variant": variant,
|
|
97
|
+
px: "md",
|
|
98
|
+
py: "sm",
|
|
99
|
+
w: "100%",
|
|
100
|
+
style: {
|
|
101
|
+
backgroundColor: isUnread ? index.fairmintVars.colorBgSurface : index.fairmintVars.colorBgSurfaceSecondary,
|
|
102
|
+
border: isList ? "none" : `1px solid ${index.fairmintVars.colorBorderDefault}`,
|
|
103
|
+
borderBottom: isList && withDivider ? `1px solid ${index.fairmintVars.colorBorderDefault}` : void 0,
|
|
104
|
+
borderRadius: isList ? 0 : 10
|
|
105
|
+
},
|
|
106
|
+
children: /* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", gap: "sm", justify: "space-between", wrap: "nowrap", children: [
|
|
107
|
+
/* @__PURE__ */ jsxRuntime.jsxs(Group.Group, { align: "flex-start", gap: "sm", miw: 0, wrap: "nowrap", style: { flex: 1 }, children: [
|
|
108
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
109
|
+
layout.Box,
|
|
110
|
+
{
|
|
111
|
+
"aria-hidden": true,
|
|
112
|
+
mt: 6,
|
|
113
|
+
style: {
|
|
114
|
+
flexShrink: 0,
|
|
115
|
+
width: 8,
|
|
116
|
+
display: "flex",
|
|
117
|
+
justifyContent: "center"
|
|
118
|
+
},
|
|
119
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
120
|
+
ColorDot.ColorDot,
|
|
121
|
+
{
|
|
122
|
+
color: isUnread ? index.fairmintVars.colorBrandPrimary : index.fairmintVars.colorBorderDisabled,
|
|
123
|
+
size: 8
|
|
124
|
+
}
|
|
125
|
+
)
|
|
126
|
+
}
|
|
127
|
+
),
|
|
128
|
+
/* @__PURE__ */ jsxRuntime.jsxs(layout.Stack, { gap: 4, miw: 0, style: { flex: 1 }, children: [
|
|
129
|
+
/* @__PURE__ */ jsxRuntime.jsx(Badge.Badge, { color: badgeColor, size: "xs", variant: "light", children: resolvedSeverityLabel }),
|
|
130
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
131
|
+
Text.Text,
|
|
132
|
+
{
|
|
133
|
+
fw: isUnread ? 600 : 500,
|
|
134
|
+
lineClamp: 2,
|
|
135
|
+
size: "sm",
|
|
136
|
+
c: index.fairmintVars.colorTextPrimary,
|
|
137
|
+
style: { minWidth: 0 },
|
|
138
|
+
children: title
|
|
139
|
+
}
|
|
140
|
+
),
|
|
141
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
142
|
+
Text.Text,
|
|
143
|
+
{
|
|
144
|
+
c: index.fairmintVars.colorTextSecondary,
|
|
145
|
+
lineClamp: 3,
|
|
146
|
+
size: "sm",
|
|
147
|
+
style: { minWidth: 0 },
|
|
148
|
+
children: body
|
|
149
|
+
}
|
|
150
|
+
)
|
|
151
|
+
] })
|
|
152
|
+
] }),
|
|
153
|
+
onToggleRead ? /* @__PURE__ */ jsxRuntime.jsx(
|
|
154
|
+
ActionIcon.ActionIcon,
|
|
155
|
+
{
|
|
156
|
+
"aria-label": resolvedToggleReadLabel,
|
|
157
|
+
color: colors.colors.neutral,
|
|
158
|
+
onClick: onToggleRead,
|
|
159
|
+
size: "md",
|
|
160
|
+
variant: "subtle",
|
|
161
|
+
children: isUnread ? /* @__PURE__ */ jsxRuntime.jsx(DefaultCheckIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(DefaultMailIcon, {})
|
|
162
|
+
}
|
|
163
|
+
) : null
|
|
164
|
+
] })
|
|
165
|
+
}
|
|
166
|
+
);
|
|
167
|
+
}
|
|
168
|
+
exports.NotificationRow = NotificationRow;
|
|
169
|
+
//# sourceMappingURL=NotificationRow.cjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationRow.cjs","sources":["../../../../src/components/generic/NotificationRow/NotificationRow.tsx"],"sourcesContent":["import { fairmintVars } from \"../../../theme\";\nimport { colors } from \"../../../theme/colors\";\nimport { ActionIcon } from \"../../primitives/ActionIcon/ActionIcon\";\nimport { Badge } from \"../../primitives/Badge/Badge\";\nimport { Box, Group, Stack, Text } from \"../../primitives/layout\";\nimport { ColorDot } from \"../ColorDot/ColorDot\";\n\nexport type NotificationRowSeverity =\n | \"critical\"\n | \"high\"\n | \"medium\"\n | \"low\"\n | \"info\"\n | \"success\"\n | \"resolved\";\n\nexport type NotificationRowVariant = \"standalone\" | \"list\";\n\nexport interface NotificationRowProps {\n /** Whether the notification is unread. @default false */\n isUnread?: boolean;\n /** Severity shown as a pill above the title. @default \"medium\" */\n severity?: NotificationRowSeverity;\n /**\n * Severity pill label. Defaults to the capitalized severity name\n * (for example, \"Critical\", \"High\", \"Completed\" for resolved).\n */\n severityLabel?: string;\n /** Primary notification title. */\n title: string;\n /** Supporting body copy. */\n body: string;\n /**\n * Caller-formatted timestamp (for example, \"2 hours ago\").\n * Included in the accessible name when provided; not shown in the row body.\n */\n timestamp?: string;\n /**\n * Toggle read/unread handler. Renders a mark-read icon action on the right.\n * Unread rows show a check icon; read rows show an envelope icon.\n */\n onToggleRead?: () => void;\n /** Accessible label for the toggle-read control. */\n toggleReadLabel?: string;\n /**\n * Layout presentation. Use `list` inside a shared bordered stack so rows\n * sit flush with no card gaps. @default \"standalone\"\n */\n variant?: NotificationRowVariant;\n /**\n * When `variant=\"list\"`, draw a bottom divider. Set false on the last row.\n * @default true\n */\n withDivider?: boolean;\n /** Accessible label for the row. Defaults to title plus read state. */\n ariaLabel?: string;\n className?: string;\n}\n\nconst SEVERITY_BADGE_COLORS: Record<NotificationRowSeverity, string> = {\n critical: colors.error,\n high: colors.warning,\n medium: colors.info,\n low: colors.neutral,\n info: colors.info,\n success: colors.success,\n resolved: colors.success,\n};\n\nconst DEFAULT_SEVERITY_LABELS: Record<NotificationRowSeverity, string> = {\n critical: \"Critical\",\n high: \"High\",\n medium: \"Medium\",\n low: \"Low\",\n info: \"Info\",\n success: \"Success\",\n resolved: \"Completed\",\n};\n\nfunction DefaultCheckIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M20 6 9 17l-5-5\" />\n </svg>\n );\n}\n\nfunction DefaultMailIcon() {\n return (\n <svg\n aria-hidden=\"true\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n >\n <path d=\"M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\" />\n <path d=\"m22 6-10 7L2 6\" />\n </svg>\n );\n}\n\n/**\n * Presentational notification row for bell/inbox surfaces.\n *\n * Owns read/unread dot, severity pill, title, body, and a mark-read icon\n * action. The caller owns routing, dedupe, and domain resolution — toggling\n * read state silences awareness only; it never completes related work.\n */\nexport function NotificationRow({\n ariaLabel,\n body,\n className,\n isUnread = false,\n onToggleRead,\n severity = \"medium\",\n severityLabel,\n timestamp,\n title,\n toggleReadLabel,\n variant = \"standalone\",\n withDivider = true,\n}: NotificationRowProps) {\n const resolvedSeverityLabel = severityLabel ?? DEFAULT_SEVERITY_LABELS[severity];\n const resolvedToggleReadLabel =\n toggleReadLabel ?? (isUnread ? `Mark read: ${title}` : `Mark unread: ${title}`);\n const readStateLabel = isUnread ? \"Unread notification\" : \"Read notification\";\n const resolvedAriaLabel =\n ariaLabel ??\n (timestamp\n ? `${title}. ${resolvedSeverityLabel}. ${readStateLabel}. ${timestamp}`\n : `${title}. ${resolvedSeverityLabel}. ${readStateLabel}`);\n const isList = variant === \"list\";\n const badgeColor = SEVERITY_BADGE_COLORS[severity];\n\n return (\n <Box\n aria-label={resolvedAriaLabel}\n role=\"group\"\n className={className}\n data-severity={severity}\n data-testid=\"notification-row\"\n data-unread={isUnread || undefined}\n data-variant={variant}\n px=\"md\"\n py=\"sm\"\n w=\"100%\"\n style={{\n backgroundColor: isUnread\n ? fairmintVars.colorBgSurface\n : fairmintVars.colorBgSurfaceSecondary,\n border: isList ? \"none\" : `1px solid ${fairmintVars.colorBorderDefault}`,\n borderBottom:\n isList && withDivider ? `1px solid ${fairmintVars.colorBorderDefault}` : undefined,\n borderRadius: isList ? 0 : 10,\n }}\n >\n <Group align=\"flex-start\" gap=\"sm\" justify=\"space-between\" wrap=\"nowrap\">\n <Group align=\"flex-start\" gap=\"sm\" miw={0} wrap=\"nowrap\" style={{ flex: 1 }}>\n <Box\n aria-hidden\n mt={6}\n style={{\n flexShrink: 0,\n width: 8,\n display: \"flex\",\n justifyContent: \"center\",\n }}\n >\n <ColorDot\n color={isUnread ? fairmintVars.colorBrandPrimary : fairmintVars.colorBorderDisabled}\n size={8}\n />\n </Box>\n\n <Stack gap={4} miw={0} style={{ flex: 1 }}>\n <Badge color={badgeColor} size=\"xs\" variant=\"light\">\n {resolvedSeverityLabel}\n </Badge>\n\n <Text\n fw={isUnread ? 600 : 500}\n lineClamp={2}\n size=\"sm\"\n c={fairmintVars.colorTextPrimary}\n style={{ minWidth: 0 }}\n >\n {title}\n </Text>\n\n <Text\n c={fairmintVars.colorTextSecondary}\n lineClamp={3}\n size=\"sm\"\n style={{ minWidth: 0 }}\n >\n {body}\n </Text>\n </Stack>\n </Group>\n\n {onToggleRead ? (\n <ActionIcon\n aria-label={resolvedToggleReadLabel}\n color={colors.neutral}\n onClick={onToggleRead}\n size=\"md\"\n variant=\"subtle\"\n >\n {isUnread ? <DefaultCheckIcon /> : <DefaultMailIcon />}\n </ActionIcon>\n ) : null}\n </Group>\n </Box>\n );\n}\n"],"names":["colors","jsx","jsxs","Box","fairmintVars","Group","ColorDot","Stack","Badge","Text","ActionIcon"],"mappings":"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"}
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
export type NotificationRowSeverity = "critical" | "high" | "medium" | "low" | "info" | "success" | "resolved";
|
|
2
|
+
export type NotificationRowVariant = "standalone" | "list";
|
|
3
|
+
export interface NotificationRowProps {
|
|
4
|
+
/** Whether the notification is unread. @default false */
|
|
5
|
+
isUnread?: boolean;
|
|
6
|
+
/** Severity shown as a pill above the title. @default "medium" */
|
|
7
|
+
severity?: NotificationRowSeverity;
|
|
8
|
+
/**
|
|
9
|
+
* Severity pill label. Defaults to the capitalized severity name
|
|
10
|
+
* (for example, "Critical", "High", "Completed" for resolved).
|
|
11
|
+
*/
|
|
12
|
+
severityLabel?: string;
|
|
13
|
+
/** Primary notification title. */
|
|
14
|
+
title: string;
|
|
15
|
+
/** Supporting body copy. */
|
|
16
|
+
body: string;
|
|
17
|
+
/**
|
|
18
|
+
* Caller-formatted timestamp (for example, "2 hours ago").
|
|
19
|
+
* Included in the accessible name when provided; not shown in the row body.
|
|
20
|
+
*/
|
|
21
|
+
timestamp?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Toggle read/unread handler. Renders a mark-read icon action on the right.
|
|
24
|
+
* Unread rows show a check icon; read rows show an envelope icon.
|
|
25
|
+
*/
|
|
26
|
+
onToggleRead?: () => void;
|
|
27
|
+
/** Accessible label for the toggle-read control. */
|
|
28
|
+
toggleReadLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Layout presentation. Use `list` inside a shared bordered stack so rows
|
|
31
|
+
* sit flush with no card gaps. @default "standalone"
|
|
32
|
+
*/
|
|
33
|
+
variant?: NotificationRowVariant;
|
|
34
|
+
/**
|
|
35
|
+
* When `variant="list"`, draw a bottom divider. Set false on the last row.
|
|
36
|
+
* @default true
|
|
37
|
+
*/
|
|
38
|
+
withDivider?: boolean;
|
|
39
|
+
/** Accessible label for the row. Defaults to title plus read state. */
|
|
40
|
+
ariaLabel?: string;
|
|
41
|
+
className?: string;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Presentational notification row for bell/inbox surfaces.
|
|
45
|
+
*
|
|
46
|
+
* Owns read/unread dot, severity pill, title, body, and a mark-read icon
|
|
47
|
+
* action. The caller owns routing, dedupe, and domain resolution — toggling
|
|
48
|
+
* read state silences awareness only; it never completes related work.
|
|
49
|
+
*/
|
|
50
|
+
export declare function NotificationRow({ ariaLabel, body, className, isUnread, onToggleRead, severity, severityLabel, timestamp, title, toggleReadLabel, variant, withDivider, }: NotificationRowProps): import("react/jsx-runtime").JSX.Element;
|
|
51
|
+
//# sourceMappingURL=NotificationRow.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"NotificationRow.d.ts","sourceRoot":"","sources":["../../../../src/components/generic/NotificationRow/NotificationRow.tsx"],"names":[],"mappings":"AAOA,MAAM,MAAM,uBAAuB,GAC/B,UAAU,GACV,MAAM,GACN,QAAQ,GACR,KAAK,GACL,MAAM,GACN,SAAS,GACT,UAAU,CAAC;AAEf,MAAM,MAAM,sBAAsB,GAAG,YAAY,GAAG,MAAM,CAAC;AAE3D,MAAM,WAAW,oBAAoB;IACnC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,kCAAkC;IAClC,KAAK,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,oDAAoD;IACpD,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IACjC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AA2DD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,EAC9B,SAAS,EACT,IAAI,EACJ,SAAS,EACT,QAAgB,EAChB,YAAY,EACZ,QAAmB,EACnB,aAAa,EACb,SAAS,EACT,KAAK,EACL,eAAe,EACf,OAAsB,EACtB,WAAkB,GACnB,EAAE,oBAAoB,2CA6FtB"}
|