@12-apps/ui 6.96.1 → 6.96.2

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.
Files changed (65) hide show
  1. package/dist/_internal/components/data-display/Avatar/Avatar.js +1 -1
  2. package/dist/_internal/components/data-display/Chip/Chip.js +3 -3
  3. package/dist/_internal/components/data-display/Chip/Chip.metrics.js +3 -1
  4. package/dist/_internal/components/data-display/Chip/Chip.styles.js +2 -2
  5. package/dist/_internal/components/data-display/index.js +4 -4
  6. package/dist/_internal/components/index.js +11 -11
  7. package/dist/_internal/components/layout/SettingCard/SettingCard.js +6 -6
  8. package/dist/_internal/components/layout/SettingCard/SettingCard.parts.js +4 -4
  9. package/dist/_internal/components/layout/SettingCard/SettingCard.summary.js +5 -5
  10. package/dist/_internal/components/layout/SettingCard/SettingGrid.js +5 -5
  11. package/dist/_internal/components/layout/SettingCard/SettingGroup.js +7 -7
  12. package/dist/_internal/components/layout/SettingCard/SettingSwitch.js +6 -6
  13. package/dist/_internal/components/layout/SettingCard/SettingToggle.js +7 -7
  14. package/dist/_internal/components/layout/index.js +10 -10
  15. package/dist/_internal/user-avatar/user-avatar.js +2 -2
  16. package/dist/{chunk-FMNOCFD2.js → chunk-2C7AWMV7.js} +2 -2
  17. package/dist/{chunk-I3QVH34Y.js → chunk-44BTMZB6.js} +3 -3
  18. package/dist/{chunk-GOWKXKWO.js → chunk-44I2KXKW.js} +7 -5
  19. package/dist/chunk-44I2KXKW.js.map +1 -0
  20. package/dist/{chunk-JIEVKHOH.js → chunk-EXEBN5ZP.js} +16 -1
  21. package/dist/chunk-EXEBN5ZP.js.map +1 -0
  22. package/dist/{chunk-Y5J2EIR4.js → chunk-F3UHWLTD.js} +2 -2
  23. package/dist/{chunk-52NM5VEW.js → chunk-GZBLDPXY.js} +3 -1
  24. package/dist/{chunk-52NM5VEW.js.map → chunk-GZBLDPXY.js.map} +1 -1
  25. package/dist/{chunk-UOI3RX4W.js → chunk-IAPFZJ6I.js} +2 -2
  26. package/dist/{chunk-E2UOEI7N.js → chunk-JJYECKEL.js} +2 -2
  27. package/dist/{chunk-BTDRBO4G.js → chunk-L2ICH44N.js} +3 -3
  28. package/dist/{chunk-VILNULUY.js → chunk-RCULGFEH.js} +3 -3
  29. package/dist/{chunk-PQ4P4OEA.js → chunk-SSWNJR36.js} +2 -2
  30. package/dist/{chunk-KCH6O6IC.js → chunk-XSLF3YGH.js} +3 -3
  31. package/dist/data-display/Avatar.js +1 -1
  32. package/dist/data-display/Chip.js +3 -3
  33. package/dist/layout/SettingCard.js +10 -10
  34. package/dist/native/data-display/Chip.js +5 -2
  35. package/dist/native/data-display/Chip.js.map +1 -1
  36. package/dist/types/components/data-display/Avatar/Avatar.d.ts.map +1 -1
  37. package/dist/types/components/data-display/Chip/Chip.base.d.ts +3 -2
  38. package/dist/types/components/data-display/Chip/Chip.base.d.ts.map +1 -1
  39. package/dist/types/components/data-display/Chip/Chip.metrics.d.ts +6 -0
  40. package/dist/types/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
  41. package/dist/types/components/data-display/Chip/Chip.styles.d.ts.map +1 -1
  42. package/dist/types-native/components/data-display/Chip/Chip.base.d.ts +3 -2
  43. package/dist/types-native/components/data-display/Chip/Chip.base.d.ts.map +1 -1
  44. package/dist/types-native/components/data-display/Chip/Chip.look.native.d.ts.map +1 -1
  45. package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts +6 -0
  46. package/dist/types-native/components/data-display/Chip/Chip.metrics.d.ts.map +1 -1
  47. package/dist/user-avatar.js +2 -2
  48. package/package.json +1 -1
  49. package/src/components/data-display/Avatar/Avatar.tsx +22 -3
  50. package/src/components/data-display/Chip/Chip.base.ts +3 -2
  51. package/src/components/data-display/Chip/Chip.look.native.ts +6 -3
  52. package/src/components/data-display/Chip/Chip.metrics.ts +6 -0
  53. package/src/components/data-display/Chip/Chip.styles.tsx +9 -4
  54. package/src/components/data-display/Chip/chip.md +1 -1
  55. package/dist/chunk-GOWKXKWO.js.map +0 -1
  56. package/dist/chunk-JIEVKHOH.js.map +0 -1
  57. /package/dist/{chunk-FMNOCFD2.js.map → chunk-2C7AWMV7.js.map} +0 -0
  58. /package/dist/{chunk-I3QVH34Y.js.map → chunk-44BTMZB6.js.map} +0 -0
  59. /package/dist/{chunk-Y5J2EIR4.js.map → chunk-F3UHWLTD.js.map} +0 -0
  60. /package/dist/{chunk-UOI3RX4W.js.map → chunk-IAPFZJ6I.js.map} +0 -0
  61. /package/dist/{chunk-E2UOEI7N.js.map → chunk-JJYECKEL.js.map} +0 -0
  62. /package/dist/{chunk-BTDRBO4G.js.map → chunk-L2ICH44N.js.map} +0 -0
  63. /package/dist/{chunk-VILNULUY.js.map → chunk-RCULGFEH.js.map} +0 -0
  64. /package/dist/{chunk-PQ4P4OEA.js.map → chunk-SSWNJR36.js.map} +0 -0
  65. /package/dist/{chunk-KCH6O6IC.js.map → chunk-XSLF3YGH.js.map} +0 -0
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/data-display/Chip/Chip.styles.tsx"],"sourcesContent":["import Avatar from '@mui/material/Avatar/index.js';\nimport type { SxProps, Theme } from '@mui/material/styles/index.js';\nimport type { KeyboardEvent, ReactElement } from 'react';\nimport React from 'react';\n\nimport { chipKeyAction, type ChipKeyArgs } from './Chip.helpers';\nimport { alpha } from '@mui/material/styles/index.js';\n\nimport {\n CHIP_SIZES,\n CHIP_TRANSITION_EASING,\n CHIP_TRANSITION_MS,\n HOVER_LIFT_PX,\n HOVER_SHADOW,\n SOFT_FOCUS_RING,\n SOFT_GROUND_ALPHA,\n SOFT_HOVER_ALPHA,\n} from './Chip.metrics';\nimport type { ChipProps } from './Chip.types';\nimport { shadowInk } from '../../../tokens/ink';\nimport { rem, rems, sxRem } from '../../../tokens/relative';\n\n/**\n * A chip is not a native control, so the two keyboard conventions it stands in\n * for are wired by hand: Delete/Backspace removes it, Enter/Space activates it.\n * The DECISION is `chipKeyAction`, which the native half reads too.\n */\nexport const makeKeyDownHandler =\n (args: ChipKeyArgs & { onClick?: () => void; onDelete?: () => void }) =>\n (event: KeyboardEvent): void => {\n const action = chipKeyAction(event.key, args);\n if (action === null) return;\n event.preventDefault();\n if (action === 'delete') {\n args.onDelete?.();\n return;\n }\n args.onClick?.();\n };\n\nexport const avatarFor = (\n avatar: ChipProps['avatar'],\n avatarSrc?: string,\n): ReactElement | undefined => {\n if (avatar && React.isValidElement(avatar)) {\n return avatar;\n }\n if (avatarSrc) {\n const { avatarSize } = CHIP_SIZES.medium;\n return <Avatar src={avatarSrc} sx={{ width: sxRem(avatarSize), height: sxRem(avatarSize) }} />;\n }\n return undefined;\n};\n\ninterface ChipStyleArgs {\n variant: ChipProps['variant'];\n color?: ChipProps['color'];\n selected?: boolean;\n clickable?: boolean;\n disabled?: boolean;\n}\n\n/** The lift's shadow, per mode — the same numbers the native chip reads. */\nconst hoverShadow = (theme: Theme): string =>\n `0 ${rems(theme, HOVER_SHADOW.offsetY, HOVER_SHADOW.blur)} ${shadowInk(\n theme,\n theme.palette.mode === 'dark' ? HOVER_SHADOW.alphaDark : HOVER_SHADOW.alphaLight,\n )}`;\n\n/**\n * Selection styling uses SEMANTIC palette tokens (not hardcoded rgba). A filled\n * selected chip keeps MUI's solid `color.main` + contrast text (clear active\n * state); an outlined selected chip gets a subtle theme-driven `action.selected`\n * tint so it reads as active without muddying the fill.\n */\n/** The palette entry a colour paints with; `neutral` has none and takes the ink. */\nconst paletteKey = (color: NonNullable<ChipProps['color']>): 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | null => {\n if (color === 'neutral') return null;\n return color === 'danger' ? 'error' : color;\n};\n\n/**\n * `soft`: the colour's tint for a ground, and for ink the step that reads on it:\n * the `dark` step in light mode, the `light` step in dark mode (FUT-4442). The\n * ground is a 14% tint over the page, so on a near-black page the ink has to be\n * lighter than `main`; `dark` there is 2.6 to 3.9:1, `light` clears 4.5:1. The\n * label, the icon and the delete glyph all take it.\n */\nconst softStyles = (color: NonNullable<ChipProps['color']>): SxProps<Theme> => {\n const key = paletteKey(color);\n const ground = (theme: Theme): string =>\n key ? alpha(theme.palette[key].main, SOFT_GROUND_ALPHA) : theme.palette.action.selected;\n const ink = (theme: Theme): string => {\n if (!key) return theme.palette.text.secondary;\n return theme.palette.mode === 'dark' ? theme.palette[key].light : theme.palette[key].dark;\n };\n return {\n backgroundColor: ground,\n color: ink,\n // A state is read at a glance: the label is set semibold.\n fontWeight: 600,\n '& .MuiChip-icon': { color: ink },\n '&.MuiChip-clickable:hover': {\n backgroundColor: (theme: Theme) => (key ? alpha(theme.palette[key].main, SOFT_HOVER_ALPHA) : theme.palette.action.hover),\n },\n // `neutral` keeps MUI's glyph and focus exactly as they were.\n ...(key ? (accentedStates(key, ink) as object) : {}),\n };\n};\n\n/**\n * What only an accented soft chip changes (FUT-4442, FUT-4461). MUI paints the\n * delete glyph in `contrastText` at 0.7, near-black on a dark ground, so the glyph\n * takes the ink. Focus, in both modes: the chip keeps its resting ground (MUI's\n * `dark` step puts the ink at about 1:1 in light mode and sinks the light ink in\n * dark mode) and draws a ring in the ink, so focus shows without the ground.\n */\nconst accentedStates = (\n key: Exclude<ReturnType<typeof paletteKey>, null>,\n ink: (theme: Theme) => string,\n): SxProps<Theme> => ({\n '& .MuiChip-deleteIcon': { color: ink, '&:hover': { color: ink } },\n '&.Mui-focusVisible': {\n backgroundColor: (theme: Theme) => alpha(theme.palette[key].main, SOFT_GROUND_ALPHA),\n outlineStyle: 'solid',\n outlineWidth: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.width),\n outlineColor: ink,\n outlineOffset: (theme: Theme) => rem(theme, SOFT_FOCUS_RING.offset),\n },\n});\n\nexport const chipStyles = ({\n variant,\n color = 'primary',\n selected,\n clickable,\n disabled,\n}: ChipStyleArgs): SxProps<Theme> => {\n const lifts = clickable && !disabled;\n\n return {\n ...(variant === 'soft' ? (softStyles(color) as object) : {}),\n // Enhanced styling for outlined variant\n ...(variant === 'outlined' && {\n borderWidth: '1px',\n borderStyle: 'solid',\n backgroundColor: 'transparent',\n }),\n ...(selected &&\n variant === 'outlined' && {\n backgroundColor: (theme: Theme) => theme.palette.action.selected,\n }),\n '&:hover': {\n ...(lifts && {\n transform: (theme: Theme) => `translateY(${rem(theme, -HOVER_LIFT_PX)})`,\n boxShadow: (theme: Theme) => hoverShadow(theme),\n }),\n },\n '&:active': {\n ...(lifts && {\n transform: 'translateY(0px)',\n }),\n },\n transition: `all ${CHIP_TRANSITION_MS / 1000}s ${CHIP_TRANSITION_EASING}`,\n };\n};\n\nexport const iconWithTestId = (\n icon: ChipProps['icon'],\n testId: string,\n): ReactElement | undefined =>\n icon && React.isValidElement(icon)\n ? React.cloneElement(icon as ReactElement, {\n 'data-testid': testId,\n } as Record<string, unknown>)\n : undefined;\n"],"mappings":"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","names":[]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/data-display/Avatar/Avatar.tsx"],"sourcesContent":["import BrokenImage from '@mui/icons-material/BrokenImage';\nimport Person from '@mui/icons-material/Person';\nimport { styled } from '@mui/material/styles/index.js';\nimport React, { useCallback, useEffect, useState } from 'react';\n\nimport {\n AVATAR_DEFAULTS,\n contentTypeOf,\n pickAvatarContent,\n type AvatarContentPick,\n} from './Avatar.helpers';\nimport { GROUP_MAX, GROUP_OVERLAP, GROUP_HOVER, BORDER_WIDTH } from './Avatar.metrics';\nimport type { AvatarProps, ContentType } from './Avatar.types';\nimport { rem } from '../../../tokens/relative';\nimport { AvatarView, type AvatarViewProps } from './Avatar.view';\nimport { EN_US_UI_LABELS } from '../../../en-US.labels';\n\n/** The node behind the winning content slot; the pick itself is shared. */\nfunction resolveContent(args: {\n children?: React.ReactNode;\n fallback?: React.ReactNode;\n icon?: React.ReactNode;\n imageError: boolean;\n showFallbackOnError: boolean;\n}): { content: React.ReactNode; contentType: ContentType } {\n const { children, fallback, icon, imageError, showFallbackOnError } = args;\n const pick = pickAvatarContent({\n hasChildren: Boolean(children),\n hasFallback: Boolean(fallback),\n hasIcon: Boolean(icon),\n imageError,\n showFallbackOnError,\n });\n const NODES: Record<AvatarContentPick, React.ReactNode> = {\n children,\n fallback,\n icon,\n broken: <BrokenImage />,\n default: <Person />,\n };\n return { content: NODES[pick], contentType: contentTypeOf(pick) };\n}\n\n/** Fades the avatar in after `animationDelay`ms. */\nfunction useMountedFade(animationDelay: number): boolean {\n const [mounted, setMounted] = useState(false);\n useEffect(() => {\n const timer = window.setTimeout(() => setMounted(true), animationDelay);\n return () => window.clearTimeout(timer);\n }, [animationDelay]);\n return mounted;\n}\n\ninterface ImageState {\n imageError: boolean;\n imageLoading: boolean;\n handleImageError: React.ReactEventHandler;\n handleImageLoad: () => void;\n}\n\n/**\n * Tracks the `<img>` load lifecycle. `imageLoading` starts true whenever there is\n * a `src` and clears on load/error — the handlers must be wired to the actual img\n * (via `slotProps.img` in the view), since load/error don't bubble to the root.\n */\nfunction useImageState(src: string | undefined, onError?: React.ReactEventHandler): ImageState {\n const [imageError, setImageError] = useState(false);\n const [imageLoading, setImageLoading] = useState(!!src);\n\n useEffect(() => {\n setImageError(false);\n setImageLoading(!!src);\n }, [src]);\n\n const handleImageError = useCallback<React.ReactEventHandler>(\n (event) => {\n setImageError(true);\n setImageLoading(false);\n onError?.(event);\n },\n [onError],\n );\n\n const handleImageLoad = useCallback(() => setImageLoading(false), []);\n\n return { imageError, imageLoading, handleImageError, handleImageLoad };\n}\n\n/** Normalizes props (defaults + rest passthrough) and derives everything the view needs. */\nfunction useAvatarModel(raw: AvatarProps, ref: React.Ref<HTMLDivElement>): AvatarViewProps {\n const {\n variant,\n size,\n glow,\n pulse,\n status,\n fallback,\n icon,\n bordered,\n color,\n src,\n alt,\n children,\n loading,\n onError,\n onClick,\n interactive,\n showFallbackOnError,\n animationDelay,\n className,\n dataTestId,\n // React Native's spelling of the same id; it names the component on both\n // sides and must not reach the DOM as an attribute.\n testID,\n ...rest\n } = { ...AVATAR_DEFAULTS, ...raw };\n\n const mounted = useMountedFade(animationDelay);\n const { imageError, imageLoading, handleImageError, handleImageLoad } = useImageState(src, onError);\n const handleClick = useCallback(\n (event: React.MouseEvent<HTMLDivElement>) => onClick?.(event),\n [onClick],\n );\n const { content, contentType } = resolveContent({\n children,\n fallback,\n icon,\n imageError,\n showFallbackOnError,\n });\n\n return {\n mounted,\n variant,\n size,\n color,\n glow,\n pulse,\n bordered,\n showSpinner: loading || imageLoading,\n imageError,\n clickable: interactive || !!onClick,\n imgSrc: imageError ? undefined : src,\n alt,\n ariaLabel: (rest['aria-label'] as string) || alt || EN_US_UI_LABELS.avatar.name,\n content,\n contentType,\n className,\n dataTestId: testID ?? dataTestId,\n status,\n forwardedRef: ref,\n onClick: handleClick,\n handleImageError,\n handleImageLoad,\n rest,\n };\n}\n\nexport const Avatar = React.forwardRef<HTMLDivElement, AvatarProps>((props, ref) => (\n <AvatarView {...useAvatarModel(props, ref)} />\n));\n\nAvatar.displayName = 'Avatar';\n\nconst AvatarGroupContainer = styled('div')<{ overlap?: number }>(({ theme, overlap = GROUP_OVERLAP }) => ({\n display: 'flex',\n alignItems: 'center',\n '& > *': {\n marginLeft: rem(theme, -overlap),\n transition: 'all 0.3s ease',\n position: 'relative',\n border: `${rem(theme, BORDER_WIDTH)} solid ${theme.palette.background.paper}`,\n '&:hover': {\n zIndex: 100,\n transform: `scale(${GROUP_HOVER.scale}) translateY(${rem(theme, -GROUP_HOVER.lift)})`,\n },\n '&:first-of-type': {\n marginLeft: 0,\n },\n },\n}));\n\n// Export AvatarGroup for grouped avatars\nexport const AvatarGroup: React.FC<{\n children: React.ReactNode;\n max?: number;\n overlap?: number;\n className?: string;\n dataTestId?: string;\n}> = ({ children, max = GROUP_MAX, overlap = GROUP_OVERLAP, className, dataTestId }) => {\n const childrenArray = React.Children.toArray(children);\n const visibleChildren = max ? childrenArray.slice(0, max) : childrenArray;\n const remainingCount = childrenArray.length - visibleChildren.length;\n\n return (\n <AvatarGroupContainer overlap={overlap} className={className} data-testid={dataTestId}>\n {visibleChildren}\n {remainingCount > 0 && (\n <Avatar\n size={(visibleChildren[0] as React.ReactElement<AvatarProps>)?.props?.size || 'md'}\n color=\"neutral\"\n fallback={`+${remainingCount}`}\n bordered\n dataTestId={dataTestId ? `${dataTestId}-overflow` : undefined}\n />\n )}\n </AvatarGroupContainer>\n );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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","names":[]}